vendredi 11 mai 2012

Javascript / HTML 5 / CSS3 : Modernizr





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/
YepNope : http://yepnopejs.com/

1 commentaire:

  1. You can solely bet throughout designated occasions, usually indicated by timers or lights. Bet limits vary depending on what you might be} wagering on; for roulette, a ‘straight up’ has a lower limit than an odd/even bet as they pay out is greater. 300 Spins credited immediately 카지노사이트.online upon qualifying deposit on pre-selected sport. The Hanover Sports & Social will be the third of the branded venues to offer sports gaming, together with areas that opened late final 12 months and this yr in Pittsburgh and Philadelphia.

    RépondreEffacer