Wied Webdesign

Mandag, 17 november 2008 Skrevet 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å.

Tilføj kommentar