Focus von Links abwenden

[Ralf]

Hallo Community,

ich habe folgendes Problem: Ich benutze <a>-Tags als Tabs für eine Webseite. Wenn ich nun darauf klicke wird jedoch kein neues Fenster geladen sondern nur ein Teil der Webseite neu. Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

Diesen Effekt würde ich gerne vermeiden. Ich habe schon versucht mit der focus() Funktion zu arbeitern, leider klappt das jedoch nicht.

Ich würde mich sehr über eine Antwort freuen. MfG, Ralf!

[Beat]

ich habe folgendes Problem: Ich benutze <a>-Tags als Tabs für eine Webseite. Wenn ich nun darauf klicke wird jedoch kein neues Fenster geladen sondern nur ein Teil der Webseite neu. Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

Diesen Effekt würde ich gerne vermeiden. Ich habe schon versucht mit der focus() Funktion zu arbeitern, leider klappt das jedoch nicht.

Du willst nicht den focus verhindern, sondern beim Focus outline ausblenden:

a:focus {outline:none;}

mfg Beat

[Ralf]

Perfekt! Vielen Dank!

[Gunnar Bittersmann]

@@Ralf:

nuqneH

Perfekt!

Das ist nicht perfekt, sondern grober Unfug: Es macht die Navigation per Tastatur (fast) unmöglich.

Vielen Dank!

Nicht dafür. Wirklich nicht.

Qapla'

[Gunnar Bittersmann]

@@Beat:

nuqneH

Du willst nicht den focus verhindern, sondern beim Focus outline ausblenden:

Von dir hätte ich erwartet, dass du nicht solchen Schwachsinn von dir gibst.

So kann(st) man sich (du mich) (ent)täuschen.

Qapla'

[Beat]

Du willst nicht den focus verhindern, sondern beim Focus outline ausblenden:
Von dir hätte ich erwartet, dass du nicht solchen Schwachsinn von dir gibst.

Ja sollte heissen.

a:active { outline:0; }

Du darfst mich ja gerne kompetent korrigieren.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

a:active { outline:0; }

Das war auch mein erster Gedanke.
↗ CSS :focus und :active – Tast(en)sinn auf Webseiten
↗ Better CSS outline suppression

Allerdings sieht es so aus, dass die 'a' nicht so lange aktiv sind, wie es der OP gern hätte. Da muss wohl doch mit JavaScript ran.

Qapla'

[Gunnar Bittersmann]

@@Ralf:

nuqneH

Ich habe schon versucht mit der focus() Funktion zu arbeitern, leider klappt das jedoch nicht.

Du möchtest nicht den Fokus setzen, sondern ihn http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#a@title=entfernen.

Qapla'

[Struppi]

Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

Was ist denn daran unschön? Ich finde diesen Rahmen dezent und darüber hinaus ist es ja auch ein wichtiges Merkmal.

Wo ist der Sinn darin, etwas Schönes, Sinnvolles und für manche auch Wichtiges zu unterdrücken?
Versuch doch mal auf so einer Seite mit der Tastatur zu surfen, es ist unangenehm, weil du nicht mehr siehst welchen Link du gerade ektiviert hast. Gerade in Zeiten wo sich Laptop, Netbook o.ä verbreiten sind solche Sachen wichtig, da dort die Bedienung der Maus bzw. des Mauspads eher unhandlich ist.

Struppi.

[Beat]

Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

Was ist denn daran unschön? Ich finde diesen Rahmen dezent und darüber hinaus ist es ja auch ein wichtiges Merkmal.

Der Rahmen ist nicht immer dezent, sondern manchmal irreführend. Wenn etwa mit absoluter Positionierung gearbeitet wird.

Wo ist der Sinn darin, etwas Schönes,

Willst du mich töten?

Sinnvolles und für manche auch Wichtiges zu unterdrücken?

Der Sinn besteht für :focus. Er besteht aber nicht für :active
Das sinnvolle ist in diesem Falle die outline. Du kannst die outline aber auch durch eine andere markantere und schönere Formatierung ersetzen.

Versuch doch mal auf so einer Seite mit der Tastatur zu surfen, es ist unangenehm, weil du nicht mehr siehst welchen Link du gerade ektiviert hast.

Nicht ektiviert, sondern fokusiert. Diese Information ist nützlich bei seiteninternen Fragmentlinks, bei Links, die mit :target einblenden lassen oder JS Elementen die eine über eine Funktion den Browser navigieren lassen.
However, bei einem AJAX-Request (dieses Element speichern) ist :outline zwar ein Indiz dafür, dass ich den Button gedrückt habe. Aber nicht zwangslöufig dafür, dass der Request erfolgreich abgesetzt wurde und das Speichern erfolgreich war.

Gerade in Zeiten wo sich Laptop, Netbook o.ä verbreiten sind solche Sachen wichtig, da dort die Bedienung der Maus bzw. des Mauspads eher unhandlich ist.

Ähm. Diese Zeiten sind doch schon lange. Let's talk 'bout touchscreens.

Ich finde die Ameisenlinie nicht unbedingt optimal. Ersetze sie durch etwas besseres.

mfg Beat

[Der Martin]

Hallo,

Ich finde die Ameisenlinie nicht unbedingt optimal. Ersetze sie durch etwas besseres.

einverstanden - aber ersetze sie nicht durch Nichts, oder durch etwas, das man nicht sieht. Der Focus muss klar erkennbar bleiben.

Ciao,
 Martin

[Struppi]

Was ist denn daran unschön? Ich finde diesen Rahmen dezent und darüber hinaus ist es ja auch ein wichtiges Merkmal.

Der Rahmen ist nicht immer dezent, sondern manchmal irreführend. Wenn etwa mit absoluter Positionierung gearbeitet wird.

Das verstehe ich nicht. Was ist, in welchem Fall irreführend? Was hat die Markierung mit Positionierung zu tun?

Wo ist der Sinn darin, etwas Schönes,

Willst du mich töten?

Wieso? Mir ist es schon immer unbegreiflich was an so einem dezenten Merkmal nicht schön sein soll. Mir gefallen auch die grauen Scrollbalken von windows, im gegensatz zu den häßlichen am Mac.

Sinnvolles und für manche auch Wichtiges zu unterdrücken?

Der Sinn besteht für :focus. Er besteht aber nicht für :active

Gerade das ist doch noch wichtiger, wenn die Seite nicht gewechselt wurde, wg. Ajax oder Frames oder sowas, damit man sieht, welchen Link man zuletzt gedrückt hatte. Aber du hast recht, bei normalen Links oder Buttons ist es natürlich :focus

Das sinnvolle ist in diesem Falle die outline. Du kannst die outline aber auch durch eine andere markantere und schönere Formatierung ersetzen.

Hab ich auch schon gesehen. Das ist dann der übliche hilflose Versuch, ein dem Benutzer bekanntes Merkmal, mit etwas vermeintlich Schönerem (was sowieso immer nur relativ ist) zu ersetzen. Wer's mag - für hilfreich halte ich das nicht.

Nicht ektiviert, sondern fokusiert. Diese Information ist nützlich bei seiteninternen Fragmentlinks, bei Links, die mit :target einblenden lassen oder JS Elementen die eine über eine Funktion den Browser navigieren lassen.

Wieso? Diese information ist bei allen Links oder Buttons wichtig, du kannst ohne sie kaum mit der Tastatur surfen.

Gerade in Zeiten wo sich Laptop, Netbook o.ä verbreiten sind solche Sachen wichtig, da dort die Bedienung der Maus bzw. des Mauspads eher unhandlich ist.

Ähm. Diese Zeiten sind doch schon lange. Let's talk 'bout touchscreens.

Naja, kann u.u. sein, dass mein Bekanntenkreis Computertechnisch eher Mittelmaß ist. Der Laptop verbreitet sich jetzt erst seit dem letzten Jahr.

Ich finde die Ameisenlinie nicht unbedingt optimal. Ersetze sie durch etwas besseres.

Mir würde nichts einfallen, ich bin sie von meinem Betriebsystem gewohnt und weiß was sie bedeutet.

Struppi.

[Gunnar Bittersmann]

@@Struppi:

nuqneH

Gerade das ist doch noch wichtiger, wenn die Seite nicht gewechselt wurde, wg. Ajax oder Frames oder sowas, damit man sieht, welchen Link man zuletzt gedrückt hatte.

Wenn dem Nutzer angezeigt werden muss, worauf er gerade geclickt hat, dann aber bitte richtig: etwas auffälliger als durch einen dünnen gepunkteten Rahmen.

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

Wenn dem Nutzer angezeigt werden muss, worauf er gerade geclickt hat, dann aber bitte richtig: etwas auffälliger als durch einen dünnen gepunkteten Rahmen.

a:active,  
a:focus {  
   text-decoration: blink;  
}

SCNR

Cü,

Kai

[Gunnar Bittersmann]

@@Struppi:

nuqneH

Wo ist der Sinn darin, etwas Schönes, Sinnvolles und für manche auch Wichtiges zu unterdrücken?

Wo ist der Sinn darin, etwas Unschönes, nicht Sinnvolles und für niemanden Wichtiges darzustellen?

Dabei geht es mir nicht um den Rahmen (outline) beim Herumspringen per Tastatur – dabei muss natürlich angezeigt werden, welches Element gerade den Fokus hat –, sondern um die Zeit nach der erfolgten Nutzeraktion (Click/[Enter]). Dann kann der Rahmen durchaus weg.

Qapla'