Fronteers — vakvereniging voor front-end developers

CSS Resets

Wat betekenen ‘reset’ en ‘normalize’ eigenlijk? Hebben deze termen wel met elkaar te maken? En wat moet je er mee als front-ender?

Wat doet de CSS reset?

Elke browser gebruikt een standaard styling voor het weergeven van de HTML elementen. Denk hierbij aan de grootte van het lettertype, de kleur en het onderstrepen van linkjes, of de witruimte (paddings of margins) van elementen zoals de <p> of <h1> tag. Niet elke browser gebruikt exact dezelfde standaard layout. Hierdoor kan je design er net iets anders uitzien in de verschillende browsers.
De WHATWG heeft in haar HTML standard suggesties aangebracht voor welke CSS de browser bouwers het beste zouden kunnen gebruiken zodat de HTML het beste weergegeven wordt zoals een front-end ontwikkelaar of zoals de WHATWG het noemt een document author het bedoeld zou hebben. Ze borduren hiermee verder op wat de W3C ooit begonnen was voor CSS1, CSS2 en CSS2.1.

Om de verschillen tussen browsers te ondervangen zijn er CSS resets en CSS normalizers.

Een CSS reset overschrijft de standaard layout van een browser met simpele, neutrale basiswaardes. Alle elementen in een HTML document krijgen zo dezelfde font-size, padding, margin, line-height, etc. De tekst in een <h1> is dus even groot als in een <small>. Het is aan de developer om vanaf dit neutrale, blanco stylesheet zijn eigen styling op te bouwen. Zoals Jeff Starr schrijft: “Het geeft de bouwer een uniforme fundering om verder op te kunnen bouwen”. (Jeff Starr: Killer Collection of CSS Resets)

Op cssresetr.com kun je zien wat verschillende resets doen. Hier zie je dat de verschillende resets ook echt verschillende zaken resetten.

Welke resets zijn er eigenlijk?

Jeff Starr heeft in zijn artikel Killer Collection of CSS Resets verschillende CSS-resets opgenomen. In augustus 2013 is het artikel geüpdatet. Het valt op dat de eerste resets vrij globaal starten met een * en een padding en margin van 0, tot aan specifiek benoemde HTML tags. Deze laatste levert dan ook een behoorlijk verhaal op. Op Sixrevisions is de geschiedenis van de css reset beschreven. Hier staan verschillende resets benoemt. Interessant om eens door te nemen.

Normalize

Een CSS reset is nogal rigoureus. Kritiek op de eerste generatie resets was bijvoorbeeld dat ze hulpzame features als :focus-styles weghaalden. Hierdoor zag je geen visuele feedback als je een link of form-element focus gaf. Dat zag er mooier uit, maar maakte de site slecht bruikbaar voor mensen die met keyboard navigeren of met hulpmiddelen surfen. Er kwam behoefte aan een opvolger die daar beter mee omging: een “normalizer”, bijvoorbeeld de normalize van Nicolas Gallagher.

Rogier Weenen, over het gebruik van Normalize en CSS resets:

“Normalize als je 'ongeveer' gelijk wil zijn tussen alle browsers. Reset als je (te) precies wil zijn…”

Charis Rooda, over het gebruik van Normalize en CSS resets:

“De reset vind ik vervelend want die slaat alles plat. De normalize trekt alles gelijk.”

Niet iedereen gebruikt Normalize. Er zijn ook ontwikkelaars die CSS resets gebruiken. Zoals Flurin Egger, hij gebruikt CSS resets. Zijn reactie na een vraag op twitter wat ontwikkelaars gebruiken, een reset of normalize: “Resets: een 0-like baseline, ik heb mijn eigen minimale versie. Normalizers = opinionated resets :)”

Moet je je CSS resetten?

Het idee achter de reset is dat je gelijk ogende websites bouwt voor elke browser. We zien steeds meer stemmen opgaan dat dit niet hoeft en ook zeker niet meer kan. Hierdoor lijkt de CSS reset aan waarde te verleizen. We hoeven als Front-end ontwikkelaar niet alles meer in de hand te houden. Elke browser mag zijn/haar eigenaardigheden hebben.

Afhankelijk van het project waar je mee bezig bent bepaal je of je de CSS een reset meegeeft. Je hebt niet altijd alle HTML tags nodig die in een standaard reset zitten. Juist dit laatste is heel belangrijk. Kijk goed naar een standaard reset en haal er uit wat je nodig hebt en neem het niet klakkeloos over.

Wat vinden andere front-enders van resets?

Roel Nieskens:

Ik gebruik een CSS reset om "alle" default styling ongedaan te maken, zodat ik dat daarna allemaal expliciet zelf kan zetten.

Maar ik begin steeds meer te denken dat iets als normalize beter is: als de browser (of de user d.m.v. instellingen) bepaalde elementen op een bepaalde manier wil renderen, dan moet ik me daar niet mee bemoeien. Een goede website hoort ook netjes te werken als bijv. alle typografische dingen op browser-default staan (line height, font size, marges, etc.).

Hidde de Vries::

Ik gebruik * { margin: 0; padding: 0; box-sizing: border-box; } of minder. Ingewikkeldere resets zitten alleen maar in de weg, die resetten 'too soon'.

Liever geen langere resets, want die zitten in de weg. Er is te ver nagedacht, door mensen die mijn project niet kennen.

Ik ga ervanuit dat wat browsers doen vaak een goede reden heeft; dat browsers soms dingen anders doen is inderdaad een probleem maar met een ingewikkelde reset los je denk ik meer op dan alleen dat probleem. Waardoor je daarna weer heel veel moet unresetten afhankelijk van je situatie.

TL;DR

Voor een front-end ontwikkelaar is het belangrijk om ervaring op te doen en te testen wat voor hem/haar handig is om te gebruiken. Elk project heeft andere uitdagingen en je kan klakkeloos een reset overnemen, maar zijn alle zaken in de reset echt nodig voor je project? Vaak niet. Voor front-end ontwikkelaars is belangrijk dat wij weten wat browsers doen, dat we weten wat HTML en CSS doet. We moeten leren hierop in te springen en mee te werken.

In dit artikel heb ik geen CSS resets opgenomen, want ik kan niet overzien welke reset het nuttigst is voor jou. Mijn bedoeling was inzicht te geven in wat een CSS reset precies is.
Leer hoe de browsers werken; hoe gaan ze om met de verschillende HTML-tags en welke verschillen worden veroorzaakt tussen de verschillende browsers? Hoe beïnvloedt dat een design dat je aan het bouwen bent?

Eric Meyer gaf in 2007 al aan: “Een CSS reset is om je aan het denken te zetten en niet om deze standaard te gebruiken”.

Gebruik jij een reset? Zo ja, welke en waarom? Zo nee, waarom niet?

Links:

Interessante artikelen om te lezen die niet genoemd zijn in de tekst:

Over Kaj Rietberg

Kaj is Front-end ontwikkelaar bij Zorgweb in Zwolle. Zijn specialisaties zijn webforms, CSS, CSS-architectuur, Sass en hij verdiept zich momenteel in het responsive bouwen van webformulieren met grote tabellen.

Reacties

1 Jefrey Arts op 14-01-2015 om 08:32 uur:
Interessant artikel, heb mijzelf nog nooit echt verdiept in het wel of niet gebruik van css resets ( of het verschil tussen een reset en normalize ). In Bootstrap zit standaard een normalize stylesheet dacht ik. Dus ik gebruik het wel, maar niet bewust. Zijn er trouwens ook normalize stylesheets die de aangeraden w3c styles toepassen?
2 Kaj op 18-01-2015 om 15:02 uur:
In Bootstrap is de Normalize van Nicolas Gallagher opgenomen. En zo in nog meer frameworks, zie de Normalize github.io pagina.
Zo ver ik weet is er 1 normalize en dat is die van Nicolas.

Maar je kan ook voor jezelf kijken welke punten je van de W3C wil overnemen en die toevoegen aan je CSS.
3 Hans Grimm op 26-01-2015 om 12:36 uur:
Vroegâh een reset gebruiker, maar vandaag de dag stop ik normalize standaard in mijn projecten. Heel soms vind ik het nodig om daarin een paar properties uit te zetten, maar doorgaans is het een uitstekende basis, en een goeie 'equalizer' :)
4 Kaj op 26-01-2015 om 22:01 uur:
Hans, zijn dat dan vaste properties of verschillen die per project die je uitzet?
5 Thomas op 01-02-2015 om 21:51 uur:
Zelf gebruik ik ook CSS resets, om een consistene ervaring aan te bieden over verschillende browsers heen.
Maar in feite zorgt het voor redundantie. Misschien moet ik bij een volgend project eens geen CSS resets gebruiken en kijken wat dat geeft, want momenteel gebruik ik ze standaard en worden ze ook altijd gebruikt in bootstrap projecten omdat dit gewoonweg wordt 'meegeleverd'.
6 Kaj op 05-03-2015 om 09:09 uur:
Door ze niet te gebruiken ga je beter begrijpen wat er precies verkeerd gaat en waarom je een reset of een normalize zou willen gebruiken of juist die zaken er uit halen die je echt nodig hebt.
7 Kaj op 06-03-2015 om 13:43 uur:
Interessante aanvulling voor de border-box reset staat op CSS-tricks (https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) en is ook overgenomen door Paul Irish die het bedacht: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Plaats een reactie