CSS Specificity – Cheat Sheet

CSS specificiteit is het grootste hindernis nadat je denkt CSS te beheersen, deze spiekbrief (cheat sheet) kan je helpen bij het dag dagelijkse uitdokteren welke CSS regel nu wel, en als niet, waarom niet, uitgevoerd wordt. Je kan het ook proberen te begrijpen met dit Nederlandstalig artikel op Gigadesign

Herinner je je de tijd dat animated gif’s cool waren, overal (soms in overuse) gebruikt werden en het niemand scheelde dat bandbreedte een issue was? Natuurlijk kan je Jquery gebruiken, maar laten we eens terug gaan in de tijd een een good old fashion animated gif gebruiken om een menu te animeren:

Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

Detecteer links in je website naar documenten – *.doc, *.xls, *.pdf – en voeg de betreffende class toe aan de links, voor als je bijvoorbeeld een icoon wilt toevoegen via CSS. Er bestaat ook een pure CSS oplossing hiervoor.

Een navigatie centreren als je float gebruikt heeft het nadeel dat je een container element moet hebben en de exacte afmetingen moet weten om het te centreren, door display:inline te gebruiken vereenvoudig je dit door geen specifieke afmetingen nodig te hebben en text-align:center doet het werk voor jouw, om het even hoeveel navigatie-items je hebt.