URL efter navn

Især i forbindelse med konstruktionen af et print stylesheet, der formaterer websiden til en printer, kan det være ganske nyttigt at sørge for, at der efter et websteds navn kommer url'en til det pågældende websted. Eksempel:

Link:

Webdesign 101

Webdesign 101

Når du betragter det øverste link er det jo klart, at du blot kan klikke for at finde frem til det pågældende websted. Men i en udskrift af websiden får du jo kun navnet. Det kan naturligvis i sig selv være en god hjælp til at finde frem til det pågældende websted. Men jeg synes nu nok, at det andet link er noget mere informativt, hvis du kan forestille dig at du kigger på en udskrift af denne side i stedet for at sidde og kigge på selve siden.

Her er den formdeklaration, der sørger for dette:

#page a.print[href]:after {content: " ["attr(href)"]";color:black;}

Du skal nok have snuset temmelig meget til CSS for at tolke denne formdeklaration, så her er en forklaring:

  1. For det første bruger jeg en kontekstuel selektor, således at kun de a-markører, der findes inde i et element der har en id="page", får de egenskaber, der er defineret i formdeklarationen.
  2. Yderligere har jeg forsynet de links, hvor denne effekt skal anvendes, med et klassenavn print.
  3. Der er tale om sammenkædede klasser, hvor den første selektor er print, mens den næste er [href]. Denne selektor udvælger de a-markører, der indeholder er href-attribut.
  4. Til sidst indsætter pseudoelementet :after noget indhold efter elementet.
  5. Vi har nu en selektor, der udvælger links, der har en href-attribut og er forsynet med class name print, og indsætter noget indhold efter disse links.
  6. I formregleblokken fortæller vi noget om, hvad dette indhold er. Det sker ved hjælp af content-egenskaben.
  7. Værdien af content-egenskaben kan indeholde tekststrenge, der skal omklamres af anførselstegn, så derfor starter værdien med " [", der tegner den første firkantede parantes efter et mellemrum.
  8. Dernæst følger en attribut-reference, det vil sige en instruks om, at indeholdet af det der skal indsættes, er værdien af den aktuelle href-attribut.
  9. Og til sidst afsluttes med endnu en tekststreng.
  10. Den anden formregel i denne formregelblok sætter farven på det indhold, der genereres af :after-pseudoelementet.

Jørgen Farum Jensen, 31. juli 2005

Ang Internet Explorer

Under normale omstændigheder vil Internet Explorer ikke kunne tolke den formdeklaration, der demonstreres i denne artikel.

Når du alligevel kan se effekten også i denne browser, skyldes det, at jeg på denne side har indlæst Dean Edwards IE7 JavaScript patch, der gør, at også IE kan tolke en lang række af de CSS2 selektorer og egenskaber, der ellers kun kan tolkes af "de andre" moderne browsere, Netscape 7, Firefox, Opera 7, Mozilla osv.