Polyfill

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 la formattazione di tali elementi utilizzando i CSS. Uno dei polyfill più diffusi, html5shiv, sfrutta una particolarità di Internet Explorer per ovviare a questo errore: chiama document.createElement("tagname") per ciascuno dei nuovi elementi HTML5, istruendo Internet Explorer ad analizzarli nel modo corretto. Il polyfill include anche uno stile predefinito di base per questi elementi.

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

Sebbene la maggior parte dei polyfill abbia come target i browser più vecchi, alcuni estendono le funzionalità dei browser moderni. Il polyfill -prefix-free di Lea Verou consente ai browser di riconoscere le versioni senza prefisso di molte proprietà di CSS3, invece di richiedere che lo sviluppatore scriva tutti i prefissi proprietari dei vendor. Il codice legge i fogli di stile della pagina e sostituisce tutte le proprietà senza prefisso con la relativa controparte con prefisso riconosciuta dal browser in uso.

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

Selectivizr di Keith Clark è un polyfill che rende funzionanti diversi selettori CSS3 in Internet Explorer 8 e precedenti. Legge i fogli di stile 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, applicando gli stili direttamente ad essi. Supporta librerie JavaScript come 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]-->

Flexible Box Layout (conosciuto anche come Flexbox) è una specifica CSS3 studiata per realizzare elementi di interfaccia avanzati. I motori WebKit e Mozilla hanno sostenuto un progetto preliminare di sintassi per vari anni. Flexie implementa il supporto per questa prima sintassi in Internet Explorer e Opera.

Nel corso del tempo le specifiche del progetto hanno subito una drastica revisione a favore di una nuova sintassi, non supportata da Flexie. Sebbene Flexie possa essere utilizzato assieme alla vecchia sintassi, è necessario includere anche la nuova sintassi per garantire la compatibilità con i browser più moderni.

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

PIE (Progressive Internet Explorer) implementa alcune proprietà CSS3 di decorazione dei box mancanti 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), cerca le proprietà non supportate di CSS3 su specifici elementi e le rappresenta utilizzando VML per Internet Explorer 6-8 e SVG per Internet Explorer 9. La sua rappresentazione visiva è paragonabile alle implementazioni native dei browser e gestisce la modifica dinamica del DOM.

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

Douglas Crockford scrisse originariamente json2.js come un'API per leggere e scrivere il formato dati JSON. Il suo impiego si è diffuso al punto che i produttori di browser hanno deciso di implementare la sua API nativamente, trasformandola in uno standard di fatto; json2.js è quindi passato da libreria a vera e propria funzione di polyfill.

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

ECMAScript 5th Edition (ES5) ha introdotto alcune funzionalità di scripting che, essendo sintatticamente compatibili con i motori JavaScript datati, possono in gran parte essere fornite tramite polyfill alterando ("patchando") i metodi degli oggetti JavaScript nativi. Il polyfill es5-shim opera in due parti: es5-shim.js contiene i metodi che possono essere riprodotti completamente, mentre es5-sham.js contiene implementazioni parziali degli altri metodi che dipendono eccessivamente dal motore sottostante per poter funzionare in modo adeguato.

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

FlashCanvas è un'implementazione delle API Canvas di HTML5 che utilizza un plugin Flash. Si tratta di un polyfill commerciale, distribuito sia in versione a pagamento sia in versione gratuita, sebbene quest'ultima difetti di alcune funzionalità grafiche avanzate come le ombre.

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

Il polyfill MediaElement.js di John Dyer fornisce il supporto per gli elementi <video> e <audio>, compresa l'API MediaElement di HTML5, nei browser datati attraverso l'impiego dei plugin Flash o Silverlight. Fornisce inoltre un'interfaccia utente opzionale per il lettore multimediale, 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 di Alexander Farkas raggruppa svariati polyfill in un unico pacchetto, caricando esclusivamente quelli richiesti e non nativamente supportati dal browser dell'utente.

<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>
    // Carica tutti i polyfill supportati, se il browser ne ha bisogno:
    $.webshims.polyfill();
</script>