Ibland tar det en stund innan poletten trillar ner…
I september 2002 meddelade Eric Meyer på CSS-discuss att han hade börjat använda CSS-signaturer på meyerweb.com - något som jag varken uppfattade som något speciellt (om jag ens noterade det då) eller har reflekterat över speciellt mycket senare heller…
Men så blev jag nyfiken på hur en av designerna på the CSS Zen garden fungerade - och plötsligt trillade poletten ner och nya möjligheter rasslade runt i huvudet som en blixt från en klar himmel…
CSS-signaturer???
Det är egentligen inte så komplicerat. En “CSS-signatur” är helt enkelt ett id-attribut med ett visst värde som är instoppat i en webbsidas bodytagg.
Exempel:
<body id="xhtml-se">Signaturen är alltså webbplatsens namn, men med punkterna utbytta mot bindestreck.
Grundtanken med CSS-signaturer är att om man lägger samma id-attribut på body-taggen på alla sina webbsidor, så kan folk som inte gillar ens CSS personalisera utseendet för webbplatsen precis hur de vill genom att lägga till egna stilregler i sin webbläsares “user style sheet”.
Tillexempel skulle man kunna lägga in:
#xhtml-se a:hover {text-decoration:none}om man irriterat sig på hur mina länkars understrykningar hanteras ;) osv.
Jaha - och?
Ja - inte nog med att det ger t.ex. synskadade som får problem med min design möjlighet att själva åtgärda problemen, utan CSS-signaturer kan dessutom användas till mer specifika uppgifter (och det var det som slog mig ikväll).
I CSS:en för det här designexemplet på the CSS Zen garden visar författaren (Egor Kloos) hur man kan separera utseendet för MSIE och Mozilla genom att utnyttja buggen i MSIE som gör att MSIE fortfarande inte kan hantera attribut-selektorer i CSS.
“attribut-selektorer” nä nu får jag huvudvärk!
OK jag förstår att det här låter tekniskt, men häng med för vi är snart klara och principen är väldigt enkel ;)
Jo alltså - CSS-selektorer som bygger på vad vissa taggattribut har för värden, som t.ex. :
a[rel=extern] {color:maroon}kallas “attribut-selektorer” och koden i exemplet ger alltså mörkröd färg på alla a-taggar som har attributet rel=”extern” såhär:
<a href="http://xhtml.se" rel="extern">xhtml.se</a>Vilket ju är ett fiffigt sätt att markera länkar som går utanför ens webbplats - men det funkar som sagt inte i MSIE…
Men tack vare att MSIE inte klarar av att hantera attribut-selektorer så kan man också skriva CSS som ser ut t.ex. såhär:
p { width:104px; border:2px solid black } /* fel värde, men "rätt" i MSIE */
body[id=xhtml-nu] p { width:100px; border:2px solid black } /* korrigering för "alla andra" */Dvs. för sådana lägen där man måste “korrigera bort” ett värde pga exempelvis en bugg i MSIE för den <!DOCTYPE man måste använda kan man utnyttja att MSIE inte klarar av attribut-selektorer!
Det sista exemplet visar hur man kan ställa in “rätt” bredd för en tagg genom att kompensera för att MSIE i vissa lägen även räknar in border i width, vilket Mozilla m.fl inte gör - detta fenomen kallas “box model”-problemet i MSIE och förekommer när man får in MSIE i “quirks mode”…
Med koden i det exemplet blir alltså en p-tagg inklusive dess border alltid exakt 104px bred vilket kan vara bra att kunna luta sig emot om man har lite snygga bakgrundsbilder i sin design - men detaljerna i exemplet är egentligen en helt annan historia… ;)
Sammanfattning av ett tips:
Med en CSS-signatur på webbsidan har man alltså alltid ett extra “kryphål” att ta till för att få ens CSS att fungera i “alla” webbläsare om och när man så behöver - och det är kanske inte så illa för ett såpass litet tillägg i koden, som dessutom är helt enligt W3C:s standard ;)
