Polyfill

En programmation web, un polyfill[1] aussi nommé shim[2],[3], ou encore prothèse d'émulation[4] désigne un palliatif logiciel implémentant une rétrocompatibilité d’une fonctionnalité ajoutée à une interface de programmation dans des versions antérieures de cette interface. Il s’agit généralement d’ensembles de fonctions, le plus souvent écrites en JavaScript ou en Flash, permettant de simuler sur un navigateur web ancien des fonctionnalités qui n’y sont pas nativement disponibles. Par exemple, accéder à des fonctions HTML5 et CSS polyfill sur des navigateurs ne proposant pas ces fonctionnalités.

Historique

Le terme a été forgé en 2009 par Remy Sharp, un programmeur, entrepreneur et conférencier britannique. Le nom provient d'une marque de résine permettant de boucher des trous dans la maçonnerie et dans des objets usuels, Polyfilla[5].

Exemples

HTML5 Shiv

Avec HTML5 Shiv :

<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->

-prefix-free

 
<link rel="stylesheet" href="/css/styles.css">
<script src="/path/to/prefixfree.min.js"></script>

Selectivizr

 
<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="/path/to/selectivizr-min.js"></script>
  <noscript><link rel="stylesheet" href="/path/to/fallback-styles.css" /></noscript>
<![endif]-->

Flexie

 
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/flexie.min.js"></script>

CSS3 PIE

En CSS3 PIE (Progressive Internet Explorer) :

.box {
    border-radius: 8px 8px 0 0;
    box-shadow: #666 0px 2px 3px;
    behavior: url(/path/to/PIE.htc);
}

JSON2.js

 
<script>
if (!window.JSON) {
  document.write('<script src="path/to/json2.js"><\/script>');
}
</script>

es5-shim

 
<script src="/path/to/es5-shim.min.js"></script>

FlashCanvas

 
<!--[if lt IE 9]>
<script src="/path/to/flashcanvas.js"></script>
<![endif]-->

MediaElement.js

 
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>

Webshims Lib

 
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="/path/to/js-webshim/minified/polyfiller.js"></script>

<script>
    // Load all supported polyfills, if the browser needs them:
    $.webshims.polyfill();
</script>


Notes et références
  1. Sébastien de la Marck, Johann Pardanaud, Découvrez le langage JavaScript, Editions Eyrolles, (lire en ligne)
  2. « Hixie's Natural Log: Mistakes, Sadness, Regret », sur ln.hixie.ch (consulté le )
  3. « What is the difference between a shim and a polyfill? », sur stackoverflow.com (consulté le )
  4. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/of
  5. (en) What is a polyfill? sur le blog de Remy Sharp

Voir aussi
  • Portail de la programmation informatique
  • Portail d’Internet
Cet article est issu de Wikipedia. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.