HTML5 : Comprendre les Polyfills, Shivs et Shims

Les dernières fonctionnalités HTML, CSS ou JavaScript ne sont pas toujours supportées par les navigateurs, ou seulement partiellement. Les shims, shivs et polyfills sont une solution, présentée par Dudley Storey.

Par

Lorsqu’on se lance dans le développement web, on est souvent étonné de voir que les navigateurs les plus à jour — dont Chrome — n’offrent pas la compatibilité la plus complète pour toutes les fonctionnalités HTML, CSS ou JavaScript. À la place, on observe un véritable patchwork de compatibilités, réparti sur tout le front du développement web : Firefox supporte une fonctionnalité, Chrome une autre, et Safari n’est pas compatible avec telle fonctionnalité supportée par Chrome.

Il y a trois raisons principales à cet état de choses :

  1. HTML est un langage vivant, en perpétuelle évolution. Le W3C codifie et standardise HTML5, mais les développeurs souhaitent souvent pouvoir utiliser des fonctionnalités qui sont encore en version bêta (comme l’API d’animation web). Ces fonctionnalités, de par leur nature inachevée, ne peuvent être que partiellement implémentées dans les dernières versions des navigateurs.
  2. Le travail à réaliser est énorme. Même s’il existe de nombreuses approches du développement des navigateurs, elles rencontrent toutes le même problème insurmontable : le travail de développement des fonctionnalités HTML5 est énorme et le nombre de personnes capables d’y contribuer reste limité.
  3. Les consommateurs n’acceptent plus les versions monolithiques de navigateurs. Il y a 20 ans, les mises à jour de navigateurs s’effectuaient tous les 12 ou 18 mois. IE6 a tenu cinq ans. Cela n’est plus accepté par les utilisateurs, qui ont besoin (ils le méritent) de mises à jour régulières. Même s’il est théoriquement possible de ne fournir une nouvelle version que lorsque la compatibilité navigateur avec la spécification HTML5 est complète, le marché a montré de manière répétée que les consommateurs préfèrent toujours une mise à jour maintenant, même si elle n’offre qu’une compatibilité partielle.

Cela laisse les développeurs web dans une situation difficile : certaines parties de HTML, CSS et JavaScript sont bien supportées (même si elles comportent parfois des bugs) tandis que les fonctionnalités de pointe dans chacun de ces langages sont parfois supportées par un ou deux navigateurs et absentes des autres. Heureusement, il existe des solutions :

Les shims sont un bout de code qui intercepte un appel API (en développement web, une requête pour une fonctionnalité HTML5, CSS ou JavaScript) et fournit un programme de remplacement. Les polyfills (le terme a été inventé par Remy Sharp) sont un shim simplifié, en ceci qu’ils sont du code ajouté dans la page pour donner au développeur la technologie dont il aurait besoin de manière native dans le navigateur.

Ce code est habituellement (mais pas exclusivement) en JavaScript, souvent mélangé à du CSS et parfois à du balisage HTML de remplacement. Il existe de nombreux polyfills déjà bien utilisés, fournissant souvent des solutions multiples aux problèmes de compatibilité des navigateurs anciens toujours sur le marché.

Lorsqu’on utilise les polyfills, il faut toutefois être attentif aux points suivants :

  1. Les polyfills eux-mêmes ont un support navigateur limité. Bien qu’écrits pour élargir la compatibilité avec les navigateurs anciens, ils ont leurs limites : pour Internet Explorer par exemple, certains ne fonctionnent qu’à partir de la version 8. Vous devriez examiner attentivement le trafic sur votre site (quels navigateurs, quelles versions) via un outil comme Google Analytics, et choisir les polyfills compatibles.
  2. Attention aux dépendances. Pour assurer une bonne compatibilité avec les anciens navigateurs, les polyfills utilisent souvent jQuery. Ce framework doit être chargé pour que le polyfill fonctionne.
  3. Utilisez le chargement conditionnel si possible. Il est inutile de charger des tonnes de JavaScript pour les navigateurs qui supportent déjà la nouvelle fonctionnalité. Faites d’abord un test de navigateur, et ne chargez que les polyfills nécessaires pour une page particulière dans un navigateur spécifique. Un outil comme Modernizr vous permet de réaliser ces tests. Dans les navigateurs récents, on peut également utiliser @supports.

Il est important de se rappeler que les polyfills sont une solution temporaire au problème de compatibilité navigateurs. Il arrivera un moment où le nombre de visites sur votre site via un navigateur ancien deviendra si faible que vous pourrez vous débarrasser du polyfill.

Pour ce qui concerne HTML5, shiv a un usage plus spécifique : HTML5shiv est un petit programme JavaScript développé à l’origine par Sjœrd Visscher pour permettre l’application de styles CSS à HTML5 dans Internet Explorer 8 qui ne reconnaissait pas les nouveaux éléments. Si vous utilisez seulement quelques balises HTML5 dans vos pages, comme <main> par exemple, vous pouvez créer un support individuel. Sinon, HTML5shiv vous donne un support global.


Intéressé par HTML ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur HTML parus dans la Cascade.

Tous les articles sur les outils parus dans la Cascade.


Ressources complémentaires en français

Ressources complémentaires en anglais


Du même auteur dans La Cascade :

HTML5 : Comprendre les Polyfills, Shivs et Shims
Les bases de SVG : Groupes
Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.