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
- SĂ©bastien de la Marck, Johann Pardanaud, DĂ©couvrez le langage JavaScript, Editions Eyrolles, (lire en ligne)
- « Hixie's Natural Log: Mistakes, Sadness, Regret », sur ln.hixie.ch (consulté le )
- « What is the difference between a shim and a polyfill? », sur stackoverflow.com (consulté le )
- https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/of
- (en) What is a polyfill? sur le blog de Remy Sharp