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[modifier | modifier le code]
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[modifier | modifier le code]
HTML5 Shiv[modifier | modifier le code]
Avec HTML5 Shiv :
<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->
-prefix-free[modifier | modifier le code]
<link rel="stylesheet" href="/css/styles.css">
<script src="/path/to/prefixfree.min.js"></script>
Selectivizr[modifier | modifier le code]
<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[modifier | modifier le code]
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/flexie.min.js"></script>
CSS3 PIE[modifier | modifier le code]
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[modifier | modifier le code]
<script>
if (!window.JSON) {
document.write('<script src="path/to/json2.js"><\/script>');
}
</script>
es5-shim[modifier | modifier le code]
<script src="/path/to/es5-shim.min.js"></script>
FlashCanvas[modifier | modifier le code]
<!--[if lt IE 9]>
<script src="/path/to/flashcanvas.js"></script>
<![endif]-->
MediaElement.js[modifier | modifier le code]
<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[modifier | modifier le code]
<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[modifier | modifier le code]
- 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
