Quelle est la signification des polyfills en HTML5?

387

Quelle est la signification des polyfills en HTML5? J'ai vu ce mot dans de nombreux sites sur HTML5, par exemple HTML5-Cross-Browser-Polyfills.

Nous collectons donc ici toutes les cales, les solutions de repli et les polyfills afin d'implanter la fonctionnalité HTML5 dans les navigateurs qui ne les prennent pas nativement en charge.

En fait, je ne comprends pas ce que signifient les polyfills.

Est-ce une nouvelle technique HTML5 ou une bibliothèque JavaScript? Je n'ai jamais entendu ce mot avant HTML5.

Et quelle est la différence entre les cales, les remplacements et les polyfills?

Jitendra Vyas
la source
1
Vous pouvez vérifier pour mieux comprendre blogs.msdn.com/b/jennifer/archive/2011/08/04/…
@ user3400622 Merci pour le lien, l'explication dans le lien est très claire.
Andrew Lam

Réponses:

377

Un polyfill est un remplacement de navigateur, fait en JavaScript, qui permet aux fonctionnalités que vous prévoyez de travailler dans les navigateurs modernes de fonctionner dans les navigateurs plus anciens, par exemple, pour prendre en charge le canevas (une fonctionnalité HTML5) dans les navigateurs plus anciens.

C'est une sorte de technique HTML5, car il est utilisé en conjonction avec HTML5, mais il ne fait pas partie de HTML5, et vous pouvez avoir des polyfills sans HTML5 (par exemple, pour prendre en charge les techniques CSS3 que vous voulez).

Voici un bon article:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Voici une liste complète des Polyfills et Shims:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Calvin Froedge
la source
6
C'est donc méchant ie7.js est aussi un polyfill
Jitendra Vyas
1
Oui: "Beaucoup de correctifs dont la transparence PNG, les styles / sélecteurs CSS, les corrections de bugs de rendu, etc." Il ajoute cette fonctionnalité via javascript que le navigateur ne prend pas déjà en charge.
Calvin Froedge
1
Je pense que le mot Polyfills est apparu après HTML5. Shim est-il différent de Polyfills?
Jitendra Vyas
16
Une cale est plus généralisée. Un polyfill est un type de cale. Voici une question qui l'explique bien: stackoverflow.com/questions/6599815/…
Calvin Froedge
6
remysharp.com/2010/10/08/what-is-a-polyfill ce lien est plus qu'un simple "bon article", c'est en fait la définition complète et l'origine du mot par la personne qui l'a inventé. Extrait: "le produit Polyfilla (spackling aux États-Unis) est une pâte qui peut être appliquée dans les murs pour couvrir les fissures et les trous." Le post couvre également le concept que la cale est antérieure à la polyfill et qu'elle est différente. C'est une lecture incontournable, OMI.
codage aaron du
64

Tout d'abord, clarifions ce qu'un polyfil n'est pas: un polyfill ne fait pas partie de la norme HTML5. Un polyfill n'est pas non plus limité à Javascript, même si vous voyez souvent des polyfill référencés dans ces contextes.

Le terme polyfill lui-même fait référence à un code qui "vous permet d'avoir certaines fonctionnalités spécifiques que vous attendez des navigateurs actuels ou" modernes "pour fonctionner également dans d'autres navigateurs qui ne prennent pas en charge cette fonctionnalité intégrée."

Source et exemple de polyfill ici:

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

Jarvis
la source
31

Un polyfill est un morceau de code (ou plugin) qui fournit la technologie que vous, le développeur, attendez du navigateur qu'il fournisse nativement.

Ranjeet Mane
la source
2
Bien expliqué.
Eugen Sunic
16

Un polyfill est une cale qui remplace l'appel d'origine par l'appel à une cale.

Par exemple, supposons que vous souhaitiez utiliser l'objet navigator.mediaDevices, mais que tous les navigateurs ne le prennent pas en charge. Vous pourriez imaginer une bibliothèque qui fournirait une cale que vous pourriez utiliser comme ceci:

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

Dans ce cas, vous appelez explicitement un shim au lieu d'utiliser l'objet ou la méthode d'origine. Le polyfill, d'autre part, remplace les objets et les méthodes sur les objets d'origine.

Par exemple:

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

Dans votre code, il semble que vous utilisiez l'objet standard navigator.mediaDevices. Mais vraiment, le polyfill (adapter.js dans l'exemple) a remplacé cet objet par le sien.

Celui avec lequel il l'a remplacé est une cale. Cela détectera si la fonctionnalité est prise en charge en mode natif et l'utilisera si elle l'est, ou elle fonctionnera en utilisant d'autres API si ce n'est pas le cas.

Un polyfill est donc une sorte de cale "transparente". Et c'est ce que Remy Sharp (qui a inventé le terme) voulait dire en disant " si vous supprimiez le script polyfill, votre code continuerait à fonctionner, sans aucune modification requise malgré la suppression du polyfill ".

Richard Shepherd
la source
9
qu'est-ce qu'une cale?
Oliver Watkins
3
@Oliver Watkins Si vous connaissez le modèle d'adaptateur, vous savez ce qu'est une cale. Shims intercepte les appels d'API et crée une couche abstraite entre l'appelant et la cible. Les cales sont généralement utilisées pour la compatibilité descendante
Anurag Ratna
@AnuragRatna Je n'utiliserais pas 'intercepter' pour éviter toute confusion. L'interception se réfère généralement au code qui intercepte (de manière transparente) c'est-à-dire à l'insu de l'appelant. Les shims fournissent des appels API pour la compatibilité descendante
Qetesh