Html5shiv

Html5shiv      Wikipedia

In het uitvoerige artikel over Modernizr wordt de Html5shiv al genoemd als eenvoudig alternatief voor de Modernizr. Waar Modernizr de browser aan een functionaliteitsonderzoek onderwerpt en aan de hand daarvan eventuele aanvullende scripts binnenlaadt, beperkt Html5shiv zich enkel tot het toevoegen van de nieuwe semantische Html5-tags zodat ze met CSS gestyled kunnen worden. In de coderegel onderaan zien we dat de Html5shiv toegevoegd wordt via een conditional statement. Dus de Shiv wordt alleen in Internet Explorer geladen!! Hoe zit het dan met Html5-support door andere oudere browsers?? Alle non-IE-browsers hebben er helemaal geen problemen mee als er styleregels worden opgehangen aan onbekende elementen. Dus als ik het element <kanarie> in mijn document gebruik dan kan ik daar gewoon in het stylesheet aan refereren met bijv. kanarie {color:yellow;}. Internet Explorer heeft daar wel problemen mee en daarom moet voor die browser een oplossing gevonden worden. Dit benadrukt nog eens dat de Shiv dus eigenlijk niets anders doet dan het creƫren van de mogelijkheid om deze elementen te stylen in IE.

Afgaande op de broncode van de shiv lijkt het er op dat de elementen: 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video' worden toegevoegd aan de reeds bekende elementen. Op deze elementen kunnen dus style-definities losgelaten worden. De volgende regels uit het Shivscript laten zien aan welke elementen door de shiv zelf al een style wordt gekoppeld:

// corrects block display not defined in IE6/7/8/9
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
// adds styling not present in IE6/7/8/9
mark{background:#FF0;color:#000}

Hoe werkt het?

Download het zipfile, extract het en sla het op in de javascript map. Neem de volgende regel op in de head