Mets-le au 3.NET: Javascript / HTML 5 / CSS3 : Modernizr

http://modernizr.com/

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>

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/