Sæt ikoner på eksterne links med CSS

Mandag 17 november 2008 af Line Wied

Har du lagt mærke til at eksterne links er markeret med et lille ikon? Jeg indførte det i dag her på wied-webdesign.dk, da jeg faldt over en artikel der beskriver hvordan man kan gøre det let og elegant det med CSS attribut-selektoren:

a[target="_blank"]{padding-right: 13px;background: url(external.gif) no-repeat center right;}

Attribut-selektorer understøttes kun i moderne browsere som FireFox, Opera og IE7+. Ældre browsere vil ignorere attribut-selektorerne, og ikonerne vil derfor ikke blive vist. I IE vil det kun virke hvis dokumentet indeholder en XHTML doctype erklæring. IE6 understøtter ikke attribut-selektorer.

Men man kan også bare bruge sin egen attribut icon="ext" og i sin CSS:

a[icon="ext"]{padding-right: 13px;background: url(external.gif) no-repeat center right;}

Dette vil matche alle links med attributten icon="ext":

<a href="/enUrl.dk" icon="ext">

Men jeg kunne også gøre min CSS helt generel, ved at udelade referencen til a, og nøjes med:

[icon="ext"]{padding-right: 13px;background: url(external.gif) no-repeat center right;}

Dette ville så sætte ikonet på alle elementer som jeg måtte ønske - ligegyldigt om det var et span, p eller en h3:

<h3 icon="ext">

<a href="/enUrl.dk" icon="ext">

En anden spændende mulighed er at markere links til pdf-filer automatisk på baggrund af fil-navnet:

a[href $='.pdf']{padding-right: 13px; background: url(pdf.gif) no-repeat center right;}

Dette vil sætte pdf-ikonet på alle links med en href-attribut der ender på ".pdf". Tilsvarende teknik kan selvfølgelig også bruges til at markere andre filtyper - f.eks. word-filer. Smart ik?

[foo]  --  Har en attribut ved navn "foo"
[foo="bar"]  --  Har en attribut ved navn "foo" med værdien "bar" ("bar")
[foo~="bar"]  -- Værdien indeholder ordet "bar" ("god bar med mad")
[foo^="bar"]  --   Værdien starter med "bar" ("bardisk")
[foo$="bar"]  --  Værdien ender med "bar" ("vin bar")
[foo*="bar"]  --  Værdien indeholder ordet "bar" ("virkelig god grillbar med vin")

Selektorerne kan såmend også kombineres, så

span[hello="Obama"][goodbye*="Bush"]

Dette vil matche alle spans med en hello-attribut med værdien "Obama" og en goodbye-attribut hvor værdien indeholder "Bush".

Hvis du er blevet inspireret til at bruge ikoner, er der her en samling du kan kigge på.