Modernizr is simpel gezegd een verzameling javascript functies die je bij een aantal dingen helpen; het ondersteunen van elementen als header en footer in “vintage” browsers, het detecteren van ondersteuning en het conditioneel inladen van scripts, afbeeldingen en fonts.

Het ‘beschikbaar maken’ van elementen als header en footer lijkt echter het enige te zijn waar Modernizr voor gebruikt wordt en dat is erg jammer. Vooral voor het schaalbaar maken van je website of applicatie is het een godsgeschenk. Het beste voorbeeld wat ik hier van kan geven is het nieuwe formulier type ‘email’: <input type=”email”/>. Voor de meeste moderne broswers is dit nieuwe type geïntegreerd en wordt er automatisch GEVALIDEERD. U hoort het goed; geen speciale javascript regular expressions gebruiken om e-mails te valideren! Je kunt altijd checken of een element inmiddels werkt op de browser die je gebruikt, maar dat kan een vervelende taak worden voor elk nieuw HTML5 element. Modernizr kan een groot deel van dit geouwehoer voor je uit jouw handen nemen.

Het type=”email” input-element gebruiken komt vooral tot zijn recht op mobiele apparaten. iOs producten (iPhones, iPads, iPod touches) herkennen het type email namelijk en passen hier het toetsenbord op aan:

iOS maakt het de gebruiker hiermee een stuk makkelijker; een hele kleine space-bar (die je eigenlijk nooit nodig hebt voor emailadressen) en een grote centrale apenstaart- en puntknop, omdat dit WEL de tekens zijn die je vaak nodig hebt bij een e-mailadres.

<input type=”email”/> gebruiken loont dus weldegelijk; je maakt het leven van je (mobiele) gebruikers er vele malen makkelijker mee. En Modernizr maakt het vervolgens mogelijk om ALS NOG validatie te bieden voor oudere browsers. En dat zonder de javascripts in te laden op browsers die dit nieuwe element wel ondersteunen, wat ook weer een groot voordeel bied op mobiel gebied. Feature-ondersteuning checken op Modernizr gaat heel eenvoudig, je hoeft niet te checken op browserversies, dit gebeurt allemaal voor je. Het enige wat je hoeft te weten is dit;

 
if(!Modernizr.inputtypes.email){
   //jouw validatiecode hier
}

 
Na het bekijken van deze presentatie (let op! de geluidkwaliteit is behoorlijk belabberd!) van Luke Crouch wordt het echt duidelijk dat, hoewel HTML5 elementen interessant zijn, ze nog erg gefragmenteerd zijn. Zelfs over moderne browsers. Modenizr helpt je orde in de chaos te scheppen en stelt je in staat om het laden van kostbare kilobytes javascript en afbeeldingen te voorkomen als de browser nieuwe elementen en validatie van je over kan nemen.

 
Hou Modernizr dus vooral goed in de gaten, op die manier hoef je niet de ontwikkeling van IEDERE browser bij te houden. En dat is wellicht de belangrijkste feature van Modernizr.