Polyfill

Nella programmazione web, un polyfill (o polyfiller) è del codice scaricabile che fornisce dei servizi che non fanno parte di un browser. Esso implementa tecnologie che uno sviluppatore si aspetta che il browser metta a disposizione nativamente, fornendo un ventaglio più uniforme di API. Ad esempio, molte caratteristiche di HTML5 non sono supportate da versioni di Internet Explorer precedenti la 8 o la 9, ma possono essere utilizzate dalle pagine web se queste installano un polyfill.^[1] Webshim^[2] e HTML5 Shivs sono concetti correlati.

Origini

Il termine ha origine con Remy Sharp il quale aveva bisogno di una parola che significasse "replicare una API utilizzando JavaScript (o Flash o altro) se il browser non ne disponesse nativamente" mentre collaborava alla stesura del libro Introducing HTML5 nel 2009. Shim, per lui, significava un pezzo di codice che poteva essere aggiunto e che fosse in grado sistemare alcune funzionalità, ma che il più delle volte aveva le proprie API e quindi non soddisfaceva i requisiti terminologici di Sharp. Allo stesso modo, i termini progressive enhancement e graceful degradation non soddisfacevano le sue esigenze in quanto non richiedevano esplicitamente o erano specifici per JavaScript.

Sharp scelse il termine polyfill in modo da indicare il riempimento delle lacune nelle funzionalità dei browser ed utilizzare un numero qualsiasi di tecniche (poly può significare "molti" in greco). Anche Polyfilla, una pasta usata per coprire le crepe e i buchi nei muri, fu un'immagine che Sharp trovò adatta per il termine. Egli ricevette feedback che dichiaravano che "la parola dovrebbe essere cambiata", ma il termine è attualmente divenuto molto popolare tra gli sviluppatori web. Sharp non promosse ampiamente il termine volutamente, utilizzandolo solo in casi specifici e ritiene che esso abbia ottenuto un'ampia visibilità dopo che Paul Irish fece esplicitamente riferimento al termine durante una presentazione mesi dopo la sua nascita ed è stato aiutato a diventare popolare grazie alla pagina di Modernizr "HTML5 shims & polyfill".

Descrizione

I polyfill permettono di risolvere i problemi con le API di un browser o di aggiungere interfacce che non sono state affatto implementate. Un polyfill è uno shim per le API di un browser. In genere, uno sviluppatore verifica a livello di codice se un browser supporta un'API e carica un polyfill se l'API non è presente. Questo permette allo sviluppo di procedere come se l'API fosse nativa all'interno del browser. Uno di questi esempi è BrowserID, il quale si basa su un'API JavaScript che (a partire da metà 2012) non è presente su nessun browser e deve essere fornita tramite un polyfill.^[3]

Un polyfill è diverso da uno shim, in quanto può essere rimosso senza alcuna modifica al resto del codice nel momento in cui l'API non implementata che sostituisce viene correttamente inclusa nel browser.

Lista dei polyfill conosciuti

html5shiv

Nelle versioni precedenti la 9 di Internet Explorer, gli elementi HTML sconosciuti come <section> e <nav> venivano considerati elementi vuoti, spezzando la struttura nidificata della pagina e rendendo impossibile il modellamento di tali elementi utilizzando il CSS. Uno dei polyfill più utilizzati, html5shiv, sfrutta un'altra stranezza di Internet Explorer per ovviare a questo bug: chiama document.createElement("tagname") per ciascuno dei nuovi elementi HTML5, il che fa in modo che Internet Explorer li analizzi nel modo corretto. Esso include anche uno stile predefinito di base per questi elementi HTML5.

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

-prefix-free

Sebbene la maggior parte dei polyfill abbiano come target i browser più datati, ve ne sono alcuni che spingono semplicemente un po' più avanti i browser moderni. Il polyfill -prefix-free di Lea Verou è di questo tipo, consentendo ai browser attuali di riconoscere le versioni senza prefisso di molte proprietà di CSS3 invece di richiedere che lo sviluppatore scriva tutti i prefissi dei vendor. Esso legge gli stylesheet della pagina e sostituisce tutte le proprietà senza prefisso con la relativa controparte con prefisso riconosciuta dal browser attuale.

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

Selectivizr

Selectivizr di Keith Clark è un famoso polyfill che rende funzionanti molti selettori CSS3 in Internet Explorer 8 e precedenti. Esso legge gli stylesheet della pagina alla ricerca di una serie di selettori CSS3 noti, quindi utilizza una libreria di selettori JavaScript per cercare nel documento gli elementi corrispondenti a tali selettori, applicando gli stili direttamente a questi elementi. Supporta molte librerie di selettori JavaScript come ad esempio jQuery.

<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

Forse una delle caratteristiche più attese di CSS3, Flexible Box Layout (conosciuto anche come Flexbox) promette di essere uno strumento estremamente potente per realizzare elementi di interfaccia. I motori WebKit e Mozilla hanno sostenuto un progetto preliminare di sintassi per anni. Flexie implementa il supporto per questa stessa sintassi in Internet Explorer e Opera.

Tuttavia, le specifiche di progetto hanno subito una drastica revisione a favore di una nuova (e molto più potente) sintassi, la quale non è ancora supportata da Flexie. Flexie può ancora essere utilizzato assieme alla vecchia sintassi, ma gli sviluppatori devono assicurarsi di includere anche la nuova sintassi per i browser futuri.

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

CSS3 PIE

PIE (Progressive Internet Explorer) implementa alcune delle più popolari proprietà CSS3 di decorazione delle box che mancano in Internet Explorer, compresi border-radius e box-shadow per Internet Explorer 8 e precedenti, e linear-gradient background per Internet Explorer 9 e precedenti. Invocato come un comportamento HTC (una caratteristica proprietaria di Internet Explorer), esso cerca le proprietà non supportate di CSS3 su specifici elementi e rappresenta queste proprietà utilizzando VML per Internet Explorer 6-8 e SVG per Internet Explorer 9. La sua rappresentazione è perlopiù indistinguibile dalle implementazioni native del browser e gestisce bene la modifica dinamica del DOM.

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

JSON 2

Douglas Crockford scrisse originariamente json2.js come un'API per leggere e scrivere il suo (allora promettente) formato dati JSON. Esso è divenuto così largamente utilizzato che i produttori di browser hanno deciso di implementare la sua API in modo nativo e trasformarla in uno standard de facto; json2.js venne quindi trasformata da libreria in polyfill.

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

es5-shim

ECMAScript 5th Edition (ES5) introduce alcune nuove funzionalità di scripting utili e, poiché sono sintatticamente compatibili con i motori JavaScript più vecchi, possono in gran parte essere trasformate in polyfill patchando i metodi degli oggetti JavaScript nativi. Questo polyfill es5-shim lo fa in due parti: es5-shim.js contiene quei metodi che possono essere completamente trasformati in polyfill, mentre es5-sham.js contiene implementazioni parziali degli altri metodi che dipendono troppo dal motore sottostante affinché possano funzionare nel modo adeguato.

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

FlashCanvas

FlashCanvas è un'implementazione delle API Canvas di HTML5 che utilizzano un plugin Flash. È un raro polyfill commerciale, disponibile in una versione a pagamento e in una versione gratuita, la quale manca di alcune funzionalità avanzate come le ombre.

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

MediaElement.js

Il polyfill MediaElement.js di John Dyer fornisce il supporto per gli elementi <video> e <audio>, compresa l'API MediaElement di HTML5, in vecchi browser che utilizzano i plugin Flash o Silverlight. Esso fornisce inoltre un'interfaccia utente opzionale al lettore multimediale, la quale è compatibile con tutti i browser.

<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

Webshims Lib di Alexander Farkas raggruppa molti altri polyfill in un unico pacchetto e carica esclusivamente quelli richiesti dal browser visitante.

<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>

Note

^ Remy Sharp, What is a polyfill?, su remysharp.com. URL consultato il 13 gennaio 2012.
^ Webshim, su afarkas.github.com. URL consultato il 3 maggio 2019 (archiviato dall'url originale il 7 febbraio 2013).
^ navigator.id, su developer.mozilla.org, Mozilla Developer Network, 30 giugno 2012. URL consultato il 25 marzo 2014 (archiviato dall'url originale il 3 agosto 2012).

Collegamenti esterni

Un elenco di polyfill che forniscono servizi HTML5, dal progetto Modernizr
Un elenco di polyfill HTML5 raggruppati per caratteristiche, su html5please.com.
Polyfill Service, su cdn.polyfill.io.

Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica

[Sharp2010-1] Remy Sharp, What is a polyfill?, su remysharp.com. URL consultato il 13 gennaio 2012.

[2] Webshim, su afarkas.github.com. URL consultato il 3 maggio 2019 (archiviato dall'url originale il 7 febbraio 2013).

[3] vigator.id, su developer.mozilla.org, Mozilla Developer Network, 30 giugno 2012. URL consultato il 25 marzo 2014 (archiviato dall'url originale il 3 agosto 2012).

[1]

[2]

[3]