Dans un article précédent, j’ai fait la présentation de Modernizr, une librairie JavaScript qui permet la détection de fonctionnalités du navigateur. Dans cet article, nous allons voir comment mettre en place un polyfill grâce à Modernizr et YepNope.js.

Polyfill

Un polyfill est une librairie JavaScript qui émule la fonctionnalité non supportée d’un navigateur (qui a dit IE 😉 )

Présentation Yepnope

YepNope.js est un « chargeur » (loader) de fichier JavaScript/CSS qui se base sur un test booléen afin de déterminer quels fichiers charger. YepNope.js est inclus dans Modernizr sous la forme d’un alias via la fonction load (Attention, la fonction load n’est pas comprise dans le Modernizr par défaut. Il faut la rajouter dans le build personnalisé. La personnalisation de ce build permet notament de spécifier quels fonctionnalité Modernizr sera capable de tester afin d’avoir un fichier le plus léger possible en fonction de vos besoins) mais il est possible de l’utiliser sans Modernizr, sous forme d’une librairie externe.

Ainsi seulement les fichiers nécessaires seront chargés. Les fichiers sont chargés de manière asynchrone, ce qui ne bloque pas votre page et ainsi donne une « fluidité » à votre site.

Voici un exemple typique d’utilisation de la fonction load (ou yepnope)

Modernizr.load({
  //test de la fonctionnalité de géolocalisation
  test: Modernizr.geolocation,
  //Si oui, on charge geo.js
  yep : 'geo.js',
  //Sinon on charge le polyfill
  nope: 'geo-polyfill.js'
});

La fonction load prend donc un objet JSON comme paramètre avec les propriétés suivantes :

• test : Ce paramètre correspond au test qui va déterminer les fichiers à charger
• yep : liste des fichiers (CSS, JavaScript) à charger dans le cas où le test est vrai
• nope : liste des fichiers (CSS, JavaScript) à charger dans le cas où le test est faux
• load (ou both) : : liste des fichiers (CSS, JavaScript) à charger dans tous les cas (que le resultat du test soit vrai ou faux)
• callback : fonction appelée après le chargement de chaque fichier (pratique pour donner une information de % d’avancement lors du chargement multiple de fichiers)
• complete : fonction appelée après le chargement de tous les fichiers

Dans le cas où vous utiliser yepnope indépendant de Modernizr (ou sans alias), seulement le nom de la méthode change :

yepnope({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Voici la liste des fonctionnalités testables en natif via Modernizr. Il est possible de rajouter d’autres propriétés via des extensions.

Exemple de mise place pour l’ombrage sur du texte

CSS3 a apporté grand nombre de nouvelle possibilité notamment le fait de pouvoir ajouter des ombres sur du texte via la propriété text-shadow.

Cette propriété est bien supportée par les navigateurs modernes mais on peut voir sur le site www.caniuse.com que cette propriété n’est supportée par IE qu’à partir de la version 10.

Dans le cas ou l’ombrage n’est pas disponible en natif sur le navigateur, nous allons utiliser le plugin JQuery textshadow.

Ce plugin dépend de JQuery (que l’on chargera depuis le CDN de Google) et nécessite le chargement de 2 fichiers (1 JS et 1 CSS). Nous incluons également notre fichier js qui va appliquer l’effet d’ombrage sur les éléments concernés.

Voici le code html de notre exemple ou nous allons juste appliquer un ombrage sur le titre (h1) de notre page.

<!-- Notre style css -->
<style type="text/css" rel="stylesheet">
h1 {
    text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.25);
}
</style>

<!-- .... -->
<h1>Nouveautés CSS3</h1>

Voici le code JavaScript effectuant le test via Modernizr et chargeant le polyfill seulement dans le cas où la fonctionnalité n’est pas supportée.

Modernizr.load({
    //On teste le support de l'ombrage
    test : Modernizr.textshadow,
    //on charge les fichiers si non supporté
    nope : ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js', 'include/jquery.textshadow.js', 'include/jquery.textshadow.css', 'include/applyShadow.js']
});

Enfin voici le code du fichier applyShadow.js qui utilise notre polyfill :

//On applique l'ombrage sur notre titre
$('h1').textshadow();

Voici le lien vers la page d’exemple.

Liens

Quelques liens utiles concernant les polyfills :

• Les fonctionnalités HTML5/CSS3 pour lesquelles il est conseillé d’utiliser des polyfills
• Liste non exhaustive de polyfill JavaScript

Conclusion

Modernizr et Yepnope.js permettent facilement la mise en place des polyfills. N’hésitez donc pas à utiliser les nouvelles API JavaScript/Fonctionnalités HTML5 et CSS3 qui permettent d’augmenter la richesse et l’ergonomie des applications webs dans les navigateurs modernes sans laisser de coté les anciens navigateurs.

Tweet