Hoe werken autoriteit regels van CSS

Inleiding

Wanneer je CSS niet leert volgens het boekje (zoals ik) zal het je zeker niet ontgaan zijn, dat de CSS code soms niet altijd werkt, terwijl het nog zo duidelijk hebt geprogrammeerd. Dit heeft met autoriteit ofwel gespecificeerdheid (specificity) van CSS te maken: de CSS regels. Deze regels zijn logisch, misschien had je ze al wel beredeneerd

Stappen

Autoriteit bepaalt welke CSS regel wordt toegepast in de browser. Elke selector heeft zijn eigen plek in de autoriteit hierarchie. Er zijn 4 verschillende categorieen die de autoriteit bepalen:

  • inline styles
  • IDs
  • classes
  • elements

Hierbij gelden de volgende regels:

  • Wanneer selectors gelijk autoriteit hebben, geldt de laatste regel
  • Wanneer selectors geen gelijke autoriteit hebben, geldt degene die het meest specifiek is.
  • De laatste regel gedefineerd, is dominant over alles vorige conflicterende regels.
  • De ingebouwde style sheet is dominanter dan niet ingebouwde style sheets
  • ID selectors hebben een hogere dominantie dan attribute (zoals a of p)
  • Probeer altijd IDs te gebruiken om specifieker te worden
  • De universele selectors kan worden weergegeven met 0,0,0,0
  • Met deze code kunnen de 4 categorieen worden benaderd

Tips

  • Je kan de specifiekheid behalen met tools
  • De webmaster tools menu bar in FireFox is zeer handig voor het bekijken van de specifiekheid

Links

  • http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


Reacties (0)

Reageer
Geen resultaten gevonden