Zet je CSS op nul

22 mei 2009 om 10:16

Beginnen met een echt schone lei

Lees ook: “Zet je CSS nog meer op nul: HTML5 Resets”

‘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 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.

De moderne browsers over elkaar heen gelegd

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

Zet je CSS nog meer op nul: HTML5 Resets

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

Over de auteur

Edgar Leijs
Edgar Leijs is een ervaren webdesigner en vaste redacteur van Heeftstijl. Woont in de hoofdstad en runt vanaf elke plek met WiFi een kleine internet design boutique: Turnyourhead360. http://www.turnyourhead360.nl
  • bregje

    Goed artikel!

  • http://www.joelcox.nl Joël Cox

    Leuk en lekker geschreven. Yahoo! heeft ook een goede CSS reset, misschien handig voor Resources. http://developer.yahoo.com/yui/reset/

  • http://www.ivobosma.nl Ivo Bosma

    Mooi artikel Edgar. Die afbeelding illustreert de verschillen perfect, hoewel ik er wel lichtelijk duizelig van wordt als ik er te lang naar kijk 😉

  • http://netty@nettyleijs.eu netty

    Goed geschreven artikel Edgar!

  • http://pasz.nl pasz

    “guidelijk”? :)

    Tof artikel!

  • http://www.edgarleijs.nl edgar.leijs

    Dank voor jullie reacties! @pasz ‘guidelijk’ is een samenvoeging van ‘duidelijk’ en ‘goed’ :-)))

  • http://www.roaldcraenen.nl Roald

    Inderdaad een goed artikel! Het doorborduren op een vorige stylesheet heeft inderdaad zijn voor en nadelen. Ik had zelf nog nooit eerder over css resets gehoord. Maar om een mooi en opgeruimde css te behouden is het wel verstandig om eerder gemaakte hacks niet verder aan te passen, maar deze dus gewoon te resetten.

  • http://ondoordachtblog.nl Thomas

    Een goed idee om hier altijd even naar te kijken, al ben ik van mening dat je niet altijd zo exact hoeft te zijn dat alles op dezelfde manier uitlijnt in elke browser. Zo lang het functioneel is en alles werkt kan je tevreden zijn met het werk. Maar als de typografie juist datgene is wat je design bij elkaar bindt dan moet je er inderdaad extra op letten.

    Waarschijnlijk is er geen bezoeker die let op hoeveel je website er op een andere browser uit ziet.

  • http://twitter.com/RumblingSkies @RumblingSkies

    Helder verhaal hoor. In hoeverre is dit nog actueel? Sws voor oudere browser wel lijkt me, maar weet je hoe het zit met nieuwe browsers?