Wen man in Mozilla Firefox auf einen Verweis klickt, dann bekommt man eine visuelle Rückmeldung in Form eines roten, gepunkteten Rahmens:
Der Internet Explorer 8 dagegen tischt einen dezenten weißen Rahmen auf. Die aktuellen Versionen von Google Chrome und Opera zeigen keine Veränderung diesbezüglich an, genau wie der Internet Explorer 6 und 7.
Mittlerweile kann ich schon fast die Uhr danach richten, wann in unserem WordPress-Workshop die Frage fällt: “kann man diese Linie entfernen bzw. ändern?”
Ja, diese Linie kann man natürlich entfernen und zwar mit folgender Regel:
a:focus {outline: 0;}Damit entfernt man in Firefox und Internet Explorer 8 die Linkumrandungen. Allerdings würde man damit ein bisschen übers Ziel hinausschießen. Ich finde den visuellen Feedback auf einen fokussierten Link durchaus wichtig, speziell im Inhalt oder in der Navigation. Meiner Meinung nach kann man allerdings bei einem verlinkten Logo darauf durchaus verzichten. Deswegen könnte man hier die Regel etwas verfeinern:
#kopfbereich a:focus {outline: 0;}Hiermit wird die Linkumrandung im Kopfbereich deaktiviert. Falls notwendig, kann man die Regel weiter spezifizieren, falls sich im Kopfbereich weitere Textlinks befinden. Natürlich kann man die Umrandung nach eigenem Geschmack gestalten, zum Beispiel:
#kopfbereich a:focus {outline: 5px solid blue;}
Beschreibungen der Pseudoklasse :focus und der Eigenschaft outline findet man unter anderem in der englischsprachigen Sitepoint-Dokumentation.
Wer Dokumentationen in deutscher Sprache bevorzugt, der wird auf The Styleworks fündig: outline und :focus.
Nachtrag: Jens Grochtdreis hat in seinem Kommentar auf einen interessanten Aspekt hingewiesen. Ich werde auch bald diesen Artikel aktualisieren um auch auf die neueren Versionen der getesteten Browser einzugehen, speziell auf den Internet Explorer 9 von Microsoft.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Die etwas kräftigere Hervorhebung ist genial 🙂
Ja, damit man bloß nichts übersieht. 🙂
Mit :focus entfernt man die Linkkennzeichnung für alle Tastaturnutzer. Das ist übel und kaum durch ein optischers Unwohlsein zu rechtfertigen. Das Problem all derer, die sich an den sinnvollen Markierungen stören läßt sich auch ohne die Referenz auf :focus beseitigen. Man nehme einfach den Pseudoselektor :active. Der wird dann getriggert, wenn ich auf etwas klicke.
@Jens,
in meinem Firefox klappt es nicht mit :active. Es ist bei einem Klick immer noch der Rahmen zu sehen.