Polyfill

En programmation web, un polyfill aussi nommé shim, ou encore prothèse d'émulation 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.

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="https://fr.m.wikipedia.org/path/to/selectivizr-min.js"></script>
  <noscript><link rel="stylesheet" href="https://fr.m.vvikipidea.org/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="https://fr.m.wikipedia.org/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>

Voir aussi

• Adaptateur (patron de conception)
• Modernizr