Wie kriege ich die Ränder um die Links weg?

Nathan Smith stellt auf seiner Seite eine Methode vor, wie man die unschönen gepunkteten Umrandungen umgehen kann, die im Firefox auftauchen, sobald man auf einen Link klickt.

Man kann diese Rahmen sowohl auf seiner eigenen Website verschwinden lassen, als auch seinen Browser trimmen, indem man das User-Style-Sheet etwas umschreibt.

Das Vorgehen ist folgendermaßen:
Zunächst einmal schalten wir die Umrandung für alle Links auf der Seite aus:

a {outline: none;}

*Nachteil*: Diese Angabe hebt alle Rahmen um Links auf und macht es somit unmöglich, die Seite per Tab-Navigation zu browsen. Besucher, die Links mit der Tastatur anspringen wollen, haben das Nachsehen.

*Besser*: Wir verwenden diese Eigenschaft nur auf aktive Linkelemente:

a:active {outline: none;}

Für Mozilla-basierte Browsertypen können wir außerdem folgende Notation verwenden, doch diese validiert nicht und funktioniert nur für Mozilla:

:focus {-moz-outline-style: none;}

Mein Schluß ist, es am besten so zu machen:
Im Stylesheet deaktiviere ich den Rahmen für alle Links siteweit, lege aber dann zusätzlich ein anderes Aussehen für angesprungene und aktive Links fest:

a {outline:none;}
#mainnav a:focus,
#mainnav a:active {
background-color:#FFF;
}

So ist mein Ästhetikbedürfnis befriedigt, und die Zugänglichkeit des Hauptmenus ist ebenfalls gewährleistet.

Wer den Code seiner Seite unangetastet lassen will und wem es in erster Linie um seine eigenen Augen geht, der kann die Rahmen immer noch in seinen Firefox-Einstellungen ausschalten, womit das Thema dann auf allen Seiten erledigt wäre. Man öffne dazu die Datei C:\Program Files\Mozilla Firefox\res\ua.css (die Default CSS-Datei des Browsers) in einem Editor und suche Zeile 123.

Dort steht:

:-moz-any-link:focus {
outline: 1px dotted invert;
}

Ändere es ab in:

:-moz-any-link:focus {
outline: none;
}

Speichern, Firefox neustarten, Voilá! Keine Umrandungen mehr, egal wohin du surfst.

29.01.2006 ✭ ✭ Ein Kommentar