Modernizr
Front-end Development Done Right
L’HTML5 et CSS3 permettent
plusieurs nouvelles possibilités de développement. Par contre, les fureteurs
plus âgés ne supportent pas nécessairement ces fonctionnalités. Tout comme jQuery, Modernizr.js est
une librairie JavaScript permettant de simplifier nos développements et donc de
gagner du temps. Celle-ci fait la
détection des éléments HTML5 et CSS3 supportés par le navigateur du visiteur.
Pour commencer voici une structure de document HTML qui
intègre Modernizr.js:
<!DOCTYPE
html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Hello Modernizr</title>
<script src="modernizr.js"></script>
</head>
<body>
</body>
</html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Hello Modernizr</title>
<script src="modernizr.js"></script>
</head>
<body>
</body>
</html>
Sur la deuxième ligne, le tag
<html> possède une classe « no-js » que Modernizr remplacera
par une classe nommée « js ».
Par la suite, cette classe pourra être référée dans votre CSS (.js{…}). Pour chaque élément qui n’est pas supporté
par le fureteur, une classe possédant le préfixe « no-» sera créée. Pour faire la détection du
support d’un élément précis il suffit d’appeler « Modernizr.<élément> ».
Exemple:
<script> if (Modernizr.canvas) { alert("This browser supports HTML5 canvas!"); } else { alert("no canvas :("); } </script>
« YepNope »
qui est inclut avec Modernizr permet de
référer des scripts/librairies selon des conditions et ainsi éviter de les
charger systématiquement, mais plutôt dans des contextes particuliers. Pour les utilisateurs qui n’ont pas besoin
des méthodes alternatives les pages seront allégées. Pour les autres, les fichiers seront chargés
aux besoins.
Exemple:
Modernizr.load({ test: Modernizr.canvas, nope: 'http://flashcanvas.net/bin/flashcanvas.js' });
Dans l’exemple précédent, si la
propriété « canvas » n’est pas supportée, le fichier “flashcanvas.js” sera chargé.
Ce qui correspond habituellement dans l’entête de nos pages à mettre:
<script src="http://flashcanvas.net/bin/flashcanvas.js"></script>
Mais cette fois, il est chargé
seulement si c’est nécessaire. Dans l’exemple,
si la condition est fausse la commande « nope » sera exécutée. Il est possible aussi d’avoir une commande
« yep » si la condition est véridique.
Voici un exemple du site de
« YepNope » sur ses possibilités :
yepnope([{ test : /* boolean(ish) - condition your test */, yep : /* array (of strings) | string - load if test is true */, nope : /* array (of strings) | string - load if test is false */, both : /* array (of strings) | string - Load everytime (sugar) */, load : /* array (of strings) | string - Load everytime (sugar) */, callback : /* function ( testResult, key ) | object { key : fn } */, complete : /* function */ }, /* ... */ ]);
En plus
de « YepNope », Modernirz, peut être jumelé à «
HTML5Shiv » qui converti les éléments non-supportés d’Internet Explorer
par des éléments reconnus similaires (appelé Polyfilling). Modernizr et ses complices forme une librairie puissante et ce avec un
minimum d’effort pour leur intégration.
Liens utiles:
Modernizr : http://modernizr.com/
Html5shiv : http://code.google.com/p/html5shiv/
YepNope : http://yepnopejs.com/