Lorsqu’il s’agit d’utiliser son navigateur pour surfer au quotidien sur Internet, de nombreux internautes ne dérogent pas à leurs habitudes : une interface utilisateur qui leur est familière ainsi que des favoris accumulés au fil des ans constituent, aux yeux de bon nombre d’internautes, des arguments décisifs qui les poussent à rester fidèles au client Web qu’ils utilisent depuis toujours. La question des mises à jour ne recueille pas non plus toujours l’attention qu’elle devrait mériter. Ne soyez donc pas étonnés si bon nombre de visiteurs de votre site Web utilisent des navigateurs qui ne prennent pas en charge les dernières fonctionnalités Web comme les éléments HTML5 ou le format SVG.
Afin que vous parveniez également à capter ces utilisateurs, il est recommandé d’utiliser des polyfills. Ces bouts de codes sont pratiques. Ils permettent d’implémenter de nouvelles fonctionnalités, comme celles mentionnées ci-dessus, sur les navigateurs Web qui, à l'origine, ne les prenaient pas en charge. Cet article va vous expliquer ce qu’est exactement un polyfill et comment l’utiliser.
Un polyfill ou shim désigne un bout de code plus ou moins long qui permet à d’anciens navigateurs de prendre en charge les fonctionnalités HTML, CSS ou JavaScript, qui n’y étaient nativement pas disponibles. Dans la plupart des cas, le polyfill est écrit en JavaScript. Néanmoins, d’autres langages de programmation Web peuvent être utilisés comme base pour ces scripts « de remplissage ». Parmi les fonctionnalités les plus importantes qui peuvent être implémentées sur les navigateurs au moyen des polyfills, citons les composants de HTML comme l’élément canvas, basé sur la technologie bitmap, pour faire des graphiques, des diagrammes et des animations.
Le terme « polyfill » vient de la marque Polyfilla largement répandue en Grande-Bretagne, et qui est en réalité un mastic destiné aux travaux de rénovation et de réfection. Le développeur Web Remy Sharp a estimé que cette matière de remplissage, destinée à combler les trous dans les murs, supportait bien la comparaison avec ces codes workaround pratiques. C’est pour cette raison qu’il leur a donné ce nom dans le livre qu’il a écrit en 2009 avec Bruce Lawson intitulé « Introducing HTML 5 ». Par la suite, polyfill est devenu le terme officiel.
Le fait que le terme polyfill soit étroitement lié à l’HTML5 n’est pas un hasard : avec ses fonctionnalités avancées qui ont rendu obsolète le recours à Flash Video, la cinquième version de l’HyperText Markup Language (langage de balisage d’hypertexte) est vite devenue un incontournable sur le Web. Cependant, en ce qui concerne le support HTML5 par les navigateurs, le développement a été relativement lent. Les dernières versions n'ont souvent pas encore complètement implémenté le standard actuel des balises. Outre les polyfills pour les éléments HTML5, les bouts de code polyfill sont également nécessaires pour l’intégration des éléments Web suivants :
Les codes polyfills en JavaScript, autrement dit les scripts de polyfill en général, peuvent être directement intégrés dans le document HTML d’un projet Web. Ils s’intègrent parfaitement dans le code source existant et, s’ils sont correctement programmés, ne sont exécutés que si le navigateur d’accès ne peut pas prendre en charge la fonction Web en question. Pour ce faire, JavaScript utilise la condition if qui permet de définir le support manquant comme une condition pour activer le script. Les deux exemples suivants expliquent comment écrire le code et à quoi ressemble la structure d’un polyfill en général.
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}Ce petit extrait de code JavaScript permet au navigateur demandeur de lancer la méthode JavaScript « startsWith() », même si dans les faits il ne la prend pas en charge. Cette méthode fait partie de la spécification ECMAScript 6 et détermine si une chaîne de caractères donnée doit débuter par des caractères ou la chaîne de caractères d’une autre chaîne. Si c’est le cas, elle renvoie la valeur « true » (vrai) ; dans le cas contraire, elle renvoie la valeur « false » (faux). Si le navigateur supporte nativement la méthode, la première ligne de code fait en sorte que le script ne soit pas exécuté.
Le développeur Mathias Bynens a proposé sur GitHub une version optimisée et plus complexe de polyfill pour intégrer la méthode « startsWith() ».
Le code affiché ne fonctionne pas si le client Web accédant bloque JavaScript ou si ce langage de script est désactivé dans les paramètres.
Le deuxième exemple de polyfill JavaScript propose une implémentation de code simplifiée qui permet de disposer des interfaces Local et Session Storage sur tous les anciens modèles de navigateurs.
if (typeof window.localStorage == 'undefined' || typeof window.sessionStorage == 'undefined') (function () {
// Define the storage type (local or session)
var Storage = function (type) {
// Define the storage type (local or session)
function setData(data) {
// Sets the data into storage
}
function clearData() {
// clears data from storage
}
return {
length: 0,
clear: function () {
clearData();
},
getItem: function (key) {
return data[key] === undefined ? null : data[key];
},
key: function (i) {
var ctr = 0;
for (var k in data) {
if (ctr == i) return k;
else ctr++;
}
return null;
},
removeItem: function (key) {
delete data[key];
this.length--;
setData(data);
},
setItem: function (key, value) {
data[key] = value + '';
this.length++;
setData(data);
}
};
};
// Set the local and session storage properties inside the window
// object
if (typeof window.localStorage == 'undefined') window.localStorage = new Storage('local');
if (typeof window.sessionStorage == 'undefined') window.sessionStorage = new Storage('session');
})();Le code indiqué est une Immediately Invoked Function Expression (IIFE), c’est-à-dire l’expression de fonction immédiatement invoquée. Cependant, avant de la charger, le navigateur vérifie comme dans le premier exemple, en activant l’instruction if dans la première ligne de code, si le client est capable de supporter nativement la technologie Web Storage. Si tel est le cas, l’instruction if prend la valeur de retour « false » (faux) puisque les paramètres pour les interfaces de Local et de Session Storage sont définis. Par conséquent, le polyfill est supprimé.
Tout internaute ayant déjà travaillé avec JavaScript pour un projet de site Web connaît la complexité du Document Object Model (DOM). Les frameworks et les bibliothèques JavaScript permettent une prise en main facilitée et un large spectre de fonctionnalités pratiques et visant à faciliter le travail des développeurs et les soutenir dans leurs efforts. Mais quels sont les meilleurs frameworks et...
Il a fallu attendre longtemps pour que HTML5 fasse son apparition en automne 2014. Sa première mise à jour, HTML 5.1, est désormais sortie. Elle apporte alors de nombreux changements : par-dessus tout, la une mise en place plus simple du responsive Web design est au cœur des attentions. Mais il faut ajouter à cela non seulement de nombreuses nouveautés HTML, mais aussi des attributs et éléments...
Avec la multiplication des systèmes de gestion de contenu et systèmes modulaires pour sites Web, on a vite l'impression qu’apprendre du HTML est une perte de temps. Mais tôt ou tard, si une page de votre site ne fonctionne plus ou si des éléments dynamiques doivent être ajoutés, vous ne pourrez aller très loin sans connaissance du langage Web. Dans ce tutoriel HTML, nous vous présenterons donc les...
Les wrappers « enveloppent » les composants logiciels, comme une jaquette pour un livre. Le programme principal communique uniquement avec la fonction wrapper, qui a accès aux interfaces des parties enveloppées du programme. Cette technique offre aux développeurs logiciels une compatibilité inégalée autorisant l’utilisation de bibliothèques, bases de données et langages de programmation...
Ne manquez pas nos offres exceptionnelles sur l'hébergement Web, WordPress, les noms de domaine et bien plus.
Valables jusqu'au 29/11/2021.
