WordPress & Webwork

CSS: die Linkumrandung manipulierenWie man mit Hilfe von CSS

Wie man mit Hilfe von CSS die Umrandung bei aktiven bzw. gerade angeklickten Links entfernt.

Wen man in Mozilla Firefox auf einen Verweis klickt, dann bekommt man eine visuelle Rückmeldung in Form eines roten, gepunkteten Rahmens:

Die Umrandung des Links in Firefox

Angeklickter Link in Firefox

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;}
Die Linkumrandung manipulieren

Eine etwas kräftigere Hervorhebung

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.

4 Reaktion(en)

  1. Jens Grochtdreis

    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.

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!