Deja Vu: browserfunctionaliteiten

Een van de zaken die ik me herinner uit de begintijd van webdevelopment, we spreken de tijd van Netscape 4 en IE4, was het rekening houden met de grote lijst van verschillen tussen die browsers.
Als Netscape 4 dan dit, als IE4 dan zus, als IE5 dan zo.
De laatste jaren waren in dat opzicht iets eenvoudiger: er kwamen wel meer browsers bij waar je rekening mee moest houden, maar met de komst van JQuery was werden veel verschillen netjes gladgestreken.
Maar nu: HTML5.
Eigenlijk een specificatie van de nieuwe HTML standaard en nog volop in ontwikkeling, maar langzaam verworden tot een losstaand begrip net als ‘web 2.0‘.
Omdat HTML5 een buzzword aan het worden is en de meeste browsers al een deel van de (lopende) specificaties aan het implementeren zijn, willen veel developers toch al iets leuks doen met de nieuwe mogelijkheden.
Maar hoe weet je nu of de browser waarin jouw site wordt getoond wel jouw mooie Canvas ondersteunt? Of het nieuwe Video element, of de Rounded Corner?
Dat kun je natuurlijk zelf gaan afvragen maar je kunt ook gebruik maken van modernizr.
Als je gebruik maakt van modernizr dan vult modernizr de html tag met classnames die weergeven welke functionaliteiten de browser ondersteunt. Je kunt deze classes vervolgens gebruiken om styling in je CSS toe te passen afhankelijk van de ondersteuning van Canvas, Rounded Corners of niet.

Bijvoorbeeld: 
.canvas #myCanvas{
background-color:green;
}
.no-canvas #myCanvas{
background-color:blue;
}

Als de browser geen HTML5 Canvas ondersteunt dan zal het in de html tag de classname ‘no-canvas‘ toevoegen; als de browser de Canvas wel ondersteunt dan zal het de classname ‘canvas‘ toevoegen.
Dit kun je dan gebruiken in je CSS om een element te stylen.

Ook voor deze kennis in je Javascript is gezorgd: modernizr geeft ook een Javascript object met properties welke functionaliteiten door de browser worden ondersteund:

if (Modernizr.canvas) {
//create nice canvas
}
else{
//hide the canvas element
}

Een goede (korte) getting started staat hier: http://webdesignernotebook.com/css/how-to-use-modernizr/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s