yepnope.js — Chargement conditionnel de scripts pour vos « Polyfills »

yepnope.js permet de charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le but de ne charger que l’essentiel. C’est le compagnon idéal de Modernizr qui se charge de détecter les fonctionnalités en question (cf. Modernizr — Détection des fonctionnalités CSS3 et HTML5). Un Polyfills est une fonction (généralement en Javascript) qui émule une fonctionnalité pour les navigateurs ne la prenant pas en charge (cf. What is a Polyfill?). Grâce à Modernizr et yepnope.js il est possible d’utiliser les fonctionnalités HTML5 et CSS3 en première intention tout en ménageant une porte de sortie pour les navigateurs plus anciens.

Exemple avec la géolocalisation

yepnope({
    test : Modernizr.geolocation,
    yep  : 'normal.js',
    nope : ['polyfill.js', 'wrapper.js']
});

Si le navigateur prend en charge la géolocalisation, nous chargeons le script normal.js, sinon, nous chargeons  les deux scripts passés en paramètres.

Devoirs à rendre pour lundi 😉

  1. → Télécharger yepnope.js sur GitHub,
  2. → Télécharger Modernizr,
  3. → Lire Regressive Enhancement with Modernizr and Yepnope.