CSS-reset: wat het is en wanneer je het moet gebruiken

De term CSS-reset is eigenlijk niet juist. "Browser-reset" geeft naar mijn mening beter aan waar het om gaat. Elke browser heeft zo zijn eigenaardigheden, zeker als het gaat om default-instellingen. Als je bijvoorbeeld geen marge opgeeft rond een figuur, gebruiken de meeste browsers 5 pixels. Opera echter zet de marge dan op 0.

Er zijn web-ontwikkelaars die dit soort kleinigheden voor lief nemen. Anderen willen dat hun website er in alle browsers er exact hetzelfde uitziet.
Een aanpak die daarbij helpt is om er voor te zorgen dat alle default-waarden in alle browsers hetzelfde zijn. Dat doe je met een CSS-reset. Dat is een style-sheet waarin je waarden op nul zet.

Inhoud van een CSS-reset style-sheet
Een dergelijk style-sheet zou er als volgt uit kunnen zien:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup,
tt, var, b, u, i, center, dl, dt, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  font-size:100%;
}
 
ol, ul, li {
  list-style: none;
}
 
a { text-decoration: none;}
 
a img { border: none; }

Alle marges, paddings, borders, enz. worden hier op nul gezet. Ook worden de standaard-bullets van lijsten uitgeschakeld en wordt de onderstreping van hyperlinks uitgeschakeld. Verder wordt ook de font-size op 100% gezet, zodat de tekst in alle browsers dezelfde grootte heeft.

Merk op dat hier ook tags bij staan die in HTML 4 en/of HTML5 deprecated (afgeraden, bijv. u) en obsolete (vervallen, bijv. center) zijn.

Het bovenstaande sheet is bruikbaar voor documenten die zijn gemaakt met HTML 4. Maar als je HTML5 wilt gebruiken komt hier nog wat bij, bijvoorbeeld:

Voor de goede orde: dit zijn slechts voorbeelden. Soms moet je hier van afwijken om je eigen site goed te laten weergeven. Je zult de werking dus altijd moeten testen in oudere browsers. Vooral met Internet Explorer van vóór versie 9 kun je voor vreemde verrassingen komen te staan!

Een uitgebreid reset-sheet vind je op meyerweb.com. Dit sheet wordt door meerdere CMS-en gebruikt. Het wordt nog regelmatig verbeterd en uitgebreid.

Waar en wanneer zou je een CSS-reset moeten doen?
Een eenduidig antwoord op die vraag is niet te geven. Het hangt er vanaf hoe erg je het vindt als je website er in "andere" browsers een beetje anders uitziet.
Voor een een hobby-site zoals deze maakt het niet zoveel uit. Voor het portfolio van een webdesigner kan het essentieel zijn!
Voor websites die zijn gemaakt met een content management system (CMS, bijv. Joomla of WordPress) is het vaak handig om CSS-reset te doen. Omdat bij een CMS de opmaak door het CMS wordt geregeld, is het handig als je bij het bouwen van de opmaak in het CMS, kunt uitgaan van een éénduidige instelling. Die kun je realiseren met een CSS-reset.