CSS: Specificity Wars

3 minutes

Note:
Dette er en direkte oversættelse af Andy Clarkes CSS: Specificity Wars
Oprindeligt udgivet: Oktober 2005

Join me, and together we can rule the galaxy as father and geeks!

For nogle uger siden så jeg Molly og Aaron i Cupertino fortælle, hvordan CSS selektorernes specificitet udregnes, på en måde jeg ikke tidligere har set. I dag kom jeg så ud for et knudret problem, mens jeg sad og lavede XHTML- og CSS-skabeloner til et nyt projekt, hvor to selektorer opførte sig anerledes end jeg havde forventet de ville gøre, og det gik op for mig, at jeg ikke havde færdiggjort min træning.

The Dark Side

Mit problem var simpelt: hvordan sender man et transparent PNG billede til browsere der inderstøtter transparens, og en GIF-fil til ældre browsere der ikke gør. uden at benytte hacks. Her er koden

<div id="nav-supp">
  <p><a id="a-02" href="#webstandards-org">Top</a></p>
  <!-- etc. -->
</div>

og mit CSS udgangspunkt:

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

Jeg havde forventet at moderne browsere ville læse og udføre begge regler (så den enden overskriver den første), og at en ældre browser, der ikke forstår attribute selektorer, kun ville læse og udføre den første. Jeg tog fejl. Moderne browsere viste ikke PNG-filen, som jeg ellers havde forventet. Grunden? En standard id selektor vinder over en attribute selektor når vi snakker overlapning. Nitten!

Jeg ved jeg burde have læst specifikationen, men på en eller anden måde havde den fornøjelse ligesom ikke nået mig. Hvis jeg havde læst den, kunne det være jeg havde lært, at

ID selektorer har en højere specifitetsværdi end attribute selektorer. I HTML, for eksempel, er selektoren #p123 mere specifik end [id=p123] når vi snakker overlapning.

Sith Lords

Efter at have Googlet lidt omkring, fandt jeg frem til noget temmelig tør læsning, angående emnet selektor specificitet (kilder nedenfor).

Lad os først kigge lidt på, hvad Lord Elasticus (Patrick Griffiths) skrev om emnet specificitet (med en eller to mindre ændringer for at tilpasse det vores ondsindede formål).

Du giver hver id selektor (”#whatever”) værdien 100, hver class selektor (”.whatever”) værdien 10, og hver HTML selektor (”whatever”) værdien 1. Herefter lægger du dem sammen, og hey presto, så har du specificitetsværdien.

  • p har en specificitet på 1 (1 HTML selektor)
  • div p har en specificitet på 2 (2 HTML selektorer; 1+1)
  • .sith har en specificitet på 10 (1 class selektor)
  • div p.sith har en specificitet på 12 (2 HTML selektorer og en class selektor; 1+1+10)
  • #sith har en specificitet på 100 (1 id selektor)
  • body #darkside .sith p har en specificitet på 112 (HTML selektor, id selektor, class selektor, HTML selektor; 1+100+10+1)

Hviss alle disse eksempler blev brugt, ville div p.sith (med en specificitet på 12) vinde over div p (med en spcificitet på 2), og body #darkside .sith p ville vinde over dem alle, uanset rækkefølge.

Darth (Gez) Lemon citerer W3C.

En selektors specificitetsværdi beregnes således:

  • find antallet af ID attributter i selektoren (= a)
  • find antallet af andre attributter og pseudo-class’er i selektoren (= b)
  • find antallet af elementnavne i selektoren (= c)
  • ignorer pseudo-elementer.

Når du sammensætter de tre tal a-b-c (i et nummersystem med en stor base) giver specificiteten.

For meget! For mig er W3C in a galaxy far, far away!

Er det muligt at lære “kraften”?

Matematik har aldrig været min stærke side, så for at hjælpe mig med til bedre at forstå, hvordan man udregner specificiteten, har jeg lavet et skema, baseret på disse specificitets- (eller Sith Power) værdier (Ed siger: “inline styles og !important ignoreres”).


element selektor

class selektor

id selektor

Hver figur (selektor) tildeles sin egen Sith Power (specificitetsværdi), afhængigt af, hvor stærke de er for The Dark Side. En Storm Trooper er svagere end Darth Vader, der ligeledes er svagere end The Emperor.

CSS: Specificity Wars
CSS: Specificity Wars: (jpg, 142Kb)

(Opdateret. Tak til Molly og Eric for afklaringen).

Kilder

Undervurdér ikke The Power of The Dark Side

Utroligt nok hjalp Star Wars mig med at forstå CSS bedre. Slut jer til mig, og sammen skal vi herske over galaksen som far og nørder

Note:
Dette er en direkte oversættelse af Andy Clarkes CSS: Specificity Wars
Oprindeligt udgivet: Oktober 2005

Skriv et svar