Modernizr

Modernizr      Wikipedia      Html5doctor

Eén van de meest voorkomende frustrerende ervaringen van een webdeveloper is de ontdekking dat de layout van de pagina die er na lang zwoegen eindelijk perfect uitziet, in een andere browser een hopeloos rommeltje blijkt te zijn. Altijd moet je er maar weer rekening mee blijven houden dat een deel van de bezoekers zich van verouderde of niet-volgens-de-standaard-werkende browsers bedient. Toen de prachtige faciliteiten van HTML5 en CSS3 ter beschikking kwamen, was mijn reactie dan ook: leuk maar helaas is dat nog lang niet aan de orde want voordat iedereen zo ver is zal er nog heel wat water door de Rijn moeten stromen. Dankzij Modernizr is het gelukkig toch mogelijk om reeds nu op HTML5 over te stappen. De problemen met oudere browsers kunnen daarmee grotendeels ondervangen worden. Het is niet zo dat Modernizr in één klap alle ontbrekende functionaliteit toevoegt. Het enige dat Modernizr zelf toevoegt, is de mogelijkheid om de nieuwe structuurtags (zoals 'aside', 'footer' 'article', 'header' en 'section') van HTML5 te kunnen gebruiken. Daarnaast detecteert Modernizr welke functionaliteit een browser bezit en geeft dit vervolgens aan in het class-attribuut van de html-tag. Aan de hand daarvan kunnen er zogenaamde 'polyfills' (javascriptfiles die de functionele gaten in een browser opvullen) geladen worden en deze polyfills voegen dus wel daadwerkelijk functionaliteit toe.

"Modernizr does allow you to use the new HTML5 sectioning elements in IE, but aside from that, it doesn’t modernize any other features. .... And good news for you, there is a polyfill for nearly every HTML5 feature that Modernizr detects. Yup. So in most cases, you can use a HTML5 or CSS3 feature and be able to replicate it in non-supporting browsers. Yes, not only can you use HTML5 today, but you can use it in the past, too!"

Dus als je beslist gebruik wil maken van bepaalde functionaliteit die de oude browsers missen, dan moet je op zoek gaan naar de juiste polyfills. Modernizr zoekt uit welke daarvan eventueel geladen moeten worden en neemt dat voor zijn rekening. Vooralsnog is enkel het laden van Modernizr genoeg om van tags als 'header', 'footer' en 'nav' gebruik te kunnen maken.

Hoe werkt het?

Allereerst moet het modernizr javascriptfile geladen worden. Dus ergens in de <head> staat een regeltje zoals dit: <script src="modernizr-2.0.6.min.js"></script>. Voordat modernizr aktief wordt, staat er in de HTML-tag: 'class="no-js"'. Stel nu dat iemand JavaScript uitgeschakeld heeft dan blijft dat er gewoon staan en daar kan dan in de CSS rekening mee gehouden worden. Gewoonlijk is JavaScript wel aktief en dan wordt dit snel veranderd. Modernizr voert een hele reeks testen uit waarin gekeken wordt over welke functionaliteit de betreffende browser al of niet beschikt. Door middel van een attribuut in de HTML-tag wordt dit geregistreerd en aan de hand hiervan kunnen er eventueel bepaalde polyfills geladen worden. Hieronder zien we het resultaat. Bovenaan staat de HTML-tag gecopieëerd uit Internet Explorer 7 en daaronder die uit de actuele versie van Chrome. Om het verschil duidelijk te maken zijn alle no's rood gekleurd.

HTML-tag in Internet Explorer 7

<html class=" ie ie8 lte9 lte8 js no-flexbox no-flexbox-legacy no-canvas no-canvastext postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache" lang="nl">

HTML-tag in Chrome (21.0.1180.83 m)

<html class=" js no-flexbox flexbox-legacy canvas canvastext postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache" lang="nl">

Modernizr Custom

Het is natuurlijk helemaal niet nodig om op functionaliteiten te testen die je niet van plan bent om te gaan gebruiken. Daarom is het mogelijk om een modernizr.js script naar eigen behoefte samen te stellen. Dit gaat heel eenvoudig door op de download-pagina van Modernizr.com enkel de gewenste tests aan te vinken. Daarna kan deze customversie worden gegenereerd en gedownload. Het is wellicht een goed idee om van deze mogelijkheid gebruik te maken hoewel zelfs het meest volledige modernizr.js-script zo klein is en zo snel evalueert dat er geen merkbare prestatieverbetering mee bereikt wordt.

SHIV

Modernizr kan dus veel meer dan enkel het verzorgen van de ondersteuning van de nieuwe HTML5-tags. Als je helemaal geen gebruik wil maken van polyfills, kan je i.p.v. Modernizr net zo goed volstaan met de zgn html5shiv. Uitleg hierover op Wikipedia. Dit is een veel korter script dat alleen de toevoeging van de nieuwe semantische tags verzorgt. Deze zelfde Shiv is opgenomen in Modernizer. Eigenlijk is het toevoegen van nieuwe elementen tamelijk simpel zoals hier te zien is. Lastiger is het om elementen toe te voegen die in sommige browsers al bestaan; dat kan tot problemen leiden. Daarom is het beter om niet zelf te gaan knutselen maar gewoon de beproefde Shiv of Modernizr te gebruiken.

Omdat Modernizr een aktief project is, doe je er verstandig aan om steeds de meest actuele versie te gebruiken. Deze is hier te downloaden.