Beginnen met een echt schone lei

‘Reset stylesheets’ kunnen je het leven echt een stuk makkelijker maken als je veel met CSS werkt. Is het je wel eens overkomen dat je voor een project intensief bezig bent geweest om er vervolgens achter te komen dat je layout in Firefox licht afwijkt van Safari en wellicht breekt in Internet Explorer?

Mij is het ook overkomen. Meer regels maken en hacks toevoegen, om uiteindelijk de weg kwijt te raken, is niet het goede antwoord. Een goede CSS reset kan je veel extra regels voorkomen en vaak kan je de meeste hacks regelrecht de sloot in schuiven, en dát geeft een lekker gevoel!

Het gebruik van CSS resets is lichtelijk controversieel. Er zijn predikers en tegenstanders, en het moet gezegd; er zijn duidelijke voor- en nadelen aan ‘reset stylesheets’.

Wat krijg je ervoor?

Alle webbrowsers hebben een ingebouwde standaard stylesheet maar ze verschillen van elkaar, ondanks de standaardisering van het W3C. Het gevolg is dat bijvoorbeeld de witruimte tussen twee alinea’s in Opera een andere hoogte heeft dan in Internet Explorer of Chrome. Het resetten van je CSS is eigenlijk niets meer dan je stylesheet op ‘nul’ zetten. Je zorgt ervoor dat er door de browsers géén styling meer wordt meegegeven bij het opbouwen van een webpagina.

Hier links: Een stukje Heeftstijl website in Firefox, Safari, Chrome, Opera en IE8 over elkaar gelegd. Het is guidelijk te zien dat er verschillen zijn in ‘line-heights’, ‘margins’ en ‘paddings’.

Om de start- én testfase te stroomlijnen, kan je dus voordat je begint aan een project, reset styles toevoegen. Nu kan je aan de slag met een hele schone (CSS-)lei!

Welke kleur past bij jou?

Er zijn verschillende reset stylesheets beschikbaar en vaak gebruikt iedere webdesigner zijn of haar aangepaste versie. Een veel gebruikte basismethode is het gebruik van de universele selector * en het op nul zetten van de margins en paddings:

* { margin: 0; padding: 0; }

Je kan ook echt alles resetten zodat je vanaf het absolute nulpunt kunt gaan opbouwen. CSS goeroe Eric Meyer heeft de ultieme CSS reset gepubliceerd op zijn website. Hij raadt echter wel aan dat je de reset styles aanpast aan je eigen behoeften, maar evengoed is deze reset een prima startpunt voor je CSS project.

Zijn er ook nadelen?

Het kan zomaar voorkomen dat je veel meer elementen moet stylen dan je zou willen. Aan het einde van de rit zit je misschien met veel meer code en declaraties in je CSS dan ooit! Sommige webdesigners nemen genoegen met de minimale verschillen die de browsers produceren. Enkelen resetten helemaal niets!

De gedachte dat je eerst elementen reset naar nul en daarna vervolgens weer elders in je document een waarde geeft, is eigenlijk dubbel werk en puristen vinden dit eigenlijk even ‘not done’ als het gebruik van ‘inline styles’.

In een ideale webwereld houden alle browserproducenten zich aan de richtlijnen van het W3C en zorgen ze voor de zelfde standaard stylesheets zodat er geen verschillen optreden in de weergave van de webpagina. Ikzelf denk dat de waarheid ergens in het midden ligt. Sommige projecten hebben enige resets nodig, andere niet. Pas ‘reset stylesheets’ naar eer en geweten toe en gebruik resets als je denkt dat het je workflow efficiënter maakt.

Resources

Eric Meyer’s CSS reset

Snook.ca – No CSS reset

Jens Meiert – Why ‘Reset’ Style Sheets Are Bad

Smashing Magazine – CSS Frameworks + CSS Reset: Design From Scratch