Un Polyfill est un script qui permet d’émuler les fonctionnalités qui manquent à un navigateur. HTML5 est constitué de nombreuses API dont certaines ne sont pas prises en charge par tous les navigateurs, y compris les plus récents. Pour les utiliser d’une manière standard (sans être obligé d’utiliser des contournements qui seront obsolètes à terme), cette collection de bibliothèques Javascript vous permettra d’implémenter les fonctionnalités HTML5 qui vous intéressent dans les navigateurs qui ne les proposent pas nativement. Modernizr  est un bon point de départ pour détecter ces fonctionnalités.

Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau ! Voici quelques exemples parmi cette liste de plus de 100 Polyfills et Fallbacks :

SVG

RaphaelJS – Raphaël est une petite bibliothèque Javascript développée par Dmitry Baranovskiy qui devrait vous simplifier la vie lors de l’utilisation des images vectorielles sur le web. Raphaël utilise les recommandations du W3C pour SVG et la technologie VML pour créer des images. Chaque visuel créé fait partie du DOM. Il est donc aisé d’ajouter des gestionnaires d’événements pour modifier ces objets à volonté. Raphaël est compatible avec Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer à partir de la version 6.0.

Canvas

ExplorerCanvas (ExCanvas) — L’élément HTML5 Canvas pour Internet Explorer. Les navigateurs modernes comme Firefox, Safari, Chrome et Opera prennent en charge le tag <canvas> pour dessiner en 2D dans le navigateur sans plugin externe. ExplorerCanvas apporte la même fonctionnalité dans Internet Explorer grâce à l’inclusion d’un simple script dans vos pages existantes (à condition qu’elles utilisent l’élément <canvas> !).

Session Storage

sessionstorage – L’objet sessionStorage pour tous les navigateurs ! (Voir aussi le script Storage polyfill de Remy Sharp).

HTML 5

html5shim & innerShiv – html5shim permet d’injecter dans le DOM d’Internet Explorer les balises HTML5. Quant à innerShiv, il s’arrange pour que les balises injectées par html5shim fonctionnent toujours lorsqu’elles sont créées via la méthode Javascript innerHTML. A noter que innerShiv n’est plus nécessaire avec jQuery 1.7.

Audio & Video

MediaElement.js – Propose des players <video> et <audio> en pur HTML & CSS pour les navigateurs modernes et des versions Flash et Silverlight pour les vieux navigateurs. Cette stratégie permet d’offrir une expérience visuelle identique aux visiteurs quel que soit le navigateur qu’ils utilisent. Cerises sur le gâteau : respect de l’accessibilité et des plugins pour les CMS WordPress, Drupal, Joomla, jQuery, and BlogEngine.NET, Ruby Gem et Plone.

Formulaires HTML5

H5F – HTML 5 Forms autorise l’utilisation des nouveaux types de champs, attributs et contraintes de validation de formulaire apparus avec HTML5, dans les vieux navigateurs.

CSS3

• CSS3 PIE – Utilisez les propriétés border-radius, box-shadow, multiple backgrounds, linear gradients, border-image dans IE de la version 6 à 9


• CSS3 – Multi Column – Utilisez les propriétés column-count, column-width, column-gap, column-rule dans Safari 1.3, Opera 7.54, Opera 8, Firefox 1.0.4, Netscape 7.1 et IE 6.


• Respond – Permet d’utiliser les propriétés min/max-width de CSS3 Media Queries dans IE 6 — 8.

Cette liste est éditée et maintenue par Paul Irish avec les contributions de Jonathan Cook, Mark Boas, Michael Behan, Mathias Bynens, Eli Grey, Øyvind Sean Kinsey, and bien d’autres.

Articles sur le même sujet

• html5media — Les balises HTML5 audio et video sans contrainte
• Le petit journal du Web -- 31 décembre 2010
• WordPress de A à Z -- F comme Functions.php
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• #Sudweb 2011 : Savoir-faire et faire-savoir