Zet je CSS nog meer op nul: HTML5 Resets

18 januari 2011 om 12:10

Zelfs Internet Explorer 9 is smoorverliefd geworden op de standaarden van het W3C. Mede daarom is de ontwikkeling van HTML5 en CSS3 in een kolkende stroomversnelling geraakt. Nieuwe browsers, nieuwe HTML, nieuwe elementen erin, oude eruit. Tijd dus voor een kakelverse CSS reset.

In deze post ga ik niet in op de discussie over het gebruik van CSS resets. Wil je meer weten over CSS correcties? Lees dan het artikel “Zet je CSS op nul”

De meest gebruikte CSS herinstellingen zijn die van Eric Meyer en de YUI3 reset van Yahoo. Maar deze zijn in hun huidige staat alleen bruikbaar voor HTML4 en XHTML. Het frisse HTML5 heeft een aantal nieuwe elementen zoals <header> en <article> die nog niet zijn opgenomen in de resets. Ook deze nieuwe tags krijgen per browser specifieke styling mee die jij als designer/developer ongewenst kan vinden.

Welke smaken zijn er?

Eigenlijk maar eentje en dat is de meest populaire, en naar mijn mening ook meest complete: de HTML5 Reset Stylesheet van HTML5 Doctor, geschreven door Richard Clark. Sinds 2009 is deze uitbreiding op de Eric Meyer reset langzaam bijgeschaafd tot een smaakvol en hedendaags recept. Het lijkt erop dat deze CSS reset tot de nieuwe standaard is gekroond.

What´s different?

Er zijn wel een aantal opvallende dingen te vinden in de Richard Clark reset. De uit de HTML5 spec verbannen elementen zijn in ieder geval uit Meyer´s stylesheet weggehaald. Dit zijn:

basefont, big, center,font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir

Lists

Kijk je naar de list styling, dan valt de volgende stijlregel op:

nav ul {list-style:none;}

en niet zoals je misschien zou verwachten:

ul,ol {list-style:none;}

De reset gaat er van uit dat je in <nav> element een unordered list gebruikt om een menu te stylen. Dan zijn die ordinaire bullets natuurlijk niet gewenst. Maar als je geen enkele styling zou gebruiken voor een <ul> of <ol> (1, 2, 3…) in een stuk content, dan is de visuele strekking van een opsomming verdwenen!

Mark

Er zijn ook voorgedefinieerde styles te vinden in deze reset! Dus niet alles op nul zetten maar ook elementen styling meegeven die beter bij hun doel passen. Een goed voorbeeld is <mark>:

mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}

Het nieuwe element <mark> is bedoeld om stukken tekst te accentueren bijvoorbeeld in zoekresultaten. Zoals je ook doet met een felgekleurde markerpen op papier. Deze stijlregels maken een stuk tekst vet, schuin en zwart.

Een gele achtergrond maakt het een echte markering. Je kunt zelf de CSS regels hiervoor aanpassen natuurlijk. Nieuwe tijden, nieuwe resets!

Bronnen

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
  • supremecore

    Nice Nice, ben nu zelf ook bezig in een boek over html5 erg interessant al zeg ik het zelf!