CSS tip: negatieve text-indent in links
Firefox gebruikers weten vast en zeker dat bij het aanklikken van een link er een dotted border rond de link verschijnt.
Als je image-replacement toepast op een link, aan de hand van een negatieve text-indent (Phark methode), dan zie je zo’n border verschijnen over de hele negatieve breedte, zoals op volgende websites:
Dit is echter heel simpel te vermijden:
h1 a {
text-indent: -999em;
overflow: hidden;
}
De overflow: hidden; zorgt ervoor dat die border slechts beperkt blijft tot het gewenste klikbare gedeelte.
Reacties
Heeft zo’n dotted border eigenlijk wel een meerwaarde vraag ik mij af? Ik vind persoonlijk dat het beter en vooral mooier is om die volledig te verbergen aan de hand van
outline: 0;. Of zondig ik hier tegen enkele toegankelijkheidsprincipes?Je kan hem inderdaad verbergen via
outline: none;, maar ik heb dat niet vermeld omdat het nu eenmaal standaard Firefox behavior is, en de gebruiker vaak dan zo’n dingen verwacht.Het heeft dan waarschijnlijk ook consequenties voor toegankelijkheid, omdat die border ook getoond wordt wanneer je met de tab van de ene link naar de andere springt.
Ik geef je volledig gelijk,
outline: 0;is dan uit den boze. ;-)Inderdaad, de
outlineverwijderen zorgt voor een slechtere toegankelijkheid voor toetsenbordgebruikers.Let er wel op dat, als je afbeeldingen uitschakelt, er niets meer te zien is? Dit kan je oplossen door een betere image replacement methode te gebruiken. Sowieso voor logo’s zou ik deze gewoon met een
img-element in de pagina opnemen.Thanks Davy. Kan het vandaag gebruiken en herinnerde me dat ik het hier ergens gelezen had. Nu ik het eenmaal heb toegepast zal ik het nooit vergeten!
Alvast een fijn 2008!