Votre site doit-il supporter les anciens navigateurs web ?

Il y a quelques années, il était d'usage de télécharger manuellement la nouvelle version de votre navigateur de prédilection. Aujourd'hui, la plupart des navigateurs proposent une mise à jour automatique. Celle-ci permet de disposer des dernières avancées en termes de développement web.

Cependant, il est important de garder à l’esprit que de nombreux utilisateurs disposent encore les anciennes versions de navigateurs. Le support s’applique donc à ce type d’utilisateurs.

“En aout 2020, l'usage d'Internet Explorer & Edge s'élevait à 7.1% du total des parts de marché des navigateurs web mondial"
_W3C Global Web Stats

Qu’est-ce que le support des navigateurs web ?

Par "support du navigateur", on entend généralement qu’un site ou une application web doivent pouvoir s'afficher et se comporter de façon identique peu importe le navigateur.

Toutefois, il est n’est pas toujours possible d’avoir le même rendu sur les anciens navigateurs que sur les plus récents. Mettre en place une politique de support permet donc de cibler les utilisateurs d’anciens navigateurs.

Quels navigateurs mon site doit-il supporter ?

La meilleure façon de répondre à cette question est d'observer quels navigateurs vos utilisateurs privilégient.

Pour ce faire - si votre site est déjà en ligne - vous pouvez vous rendre dans Google Analytics => Audience => Vue d’ensemble => Système => Navigateur. Cliquez ensuite sur l’un des navigateurs. Au-dessus du tableau, cliquez sur Dimension principale et cliquez finalement sur Version du navigateur.

Si votre site n’existe pas encore, vous pouvez vous appuyer sur les statistiques d’utilisation d’un navigateur en fonction de la région géographique.

Source: StatCounter Global Stats - Browser Market Share

Parts de marché des navigateurs web en France - Septembre 2019 - Septembre 2020 - Statcounter

Avec de tels outils, il sera plus facile de dresser un état des lieux et de savoir sur quels navigateurs vous pourrez faire l’impasse.

Quel support pour la fonctionnalité que je souhaite utiliser ?

Afin de connaître le support d'une propriété CSS ou d'une fonctionnalité Javascript suivant les navigateurs, il est intéressant de consulter le site : caniuse.com

Caniuse.com permet d'identifier si le navigateur supporte totalement, partiellement ou ne supporte tout simplement pas une fonctionnalité. On pourra ensuite déterminer s’il est nécessaire de trouver une alternative à ladite fonctionnalité.

Le support en Javascript

Détection de navigateur ou fonctionnalité

La détection d'un navigateur en Javascript est possible grâce à l’aide du user-agent. Voyons dans l’exemple suivant un code simplifié :

if (User Agent == Internet Explorer) {
// Code pour Internet Explorer
}

if (User Agent == Safari) {
// Code pour Safari
}

Cette méthode pose 3 problèmes principaux :

• Le user-agent peut être falsifié assez simplement et ne représente donc pas une information assez fiable pour être utilisée.
• Il est impossible de connaître les fonctionnalités qui vont être implémentées dans les versions ultérieures d’un navigateur. Si les futures versions changent leur façon d’interpréter une fonctionnalité, votre script sera inutile et pourrait poser problème pour le fonctionnement du site.
• Il faut se tenir informé des fonctionnalités supportées par les différents navigateurs. Cela peut s’avérer simple lorsqu’il s’agit d’une fonctionnalité en particulier mais peut vite devenir contraignant lorsqu’il s’agit de plusieurs fonctionnalités en même temps.

Par conséquent, il est plus judicieux de raisonner en termes de fonctionnalité que de navigateur.

Contrairement à l’exemple précédent, la détection de fonctionnalités ne se base pas sur le navigateur. Elle consiste plutôt à vérifier qu'une fonctionnalité est disponible.

La détection de fonctionnalités s'effectue de la façon suivante :

if (fonctionnalité A) {
// Code pour le navigateur supportant la fonctionnalité A
} else {
// Code pour les navigateur ne supportant la fonctionnalité A
}

Utilisation de Polyfill

Un Polyfill est un ensemble de fonctions ayant pour but de retranscrire une (ou plusieurs) fonctionnalité(s) non disponible(s) nativement sur des anciens navigateurs.

En l'occurrence, cette solution devrait être idéale pour pouvoir faire fonctionner le support d'une fonctionnalité sur un ancien navigateur. Dans les faits, le Polyfill vérifie si la caractéristique est supportée par le navigateur. Si celle-ci n'est pas supportée, il exécute un morceau de code ayant pour but de permettre le support de la fonctionnalité.

Babel est un compiler Javascript qui inclut un Polyfill puissant. Celui-ci permet d'utiliser les dernières syntaxes ES6 en les convertissant en code natif. Cela permet au code d'être exécuté sur d'anciens navigateurs.

Si vous avez besoin d'un support pour une fonctionnalité spécifique, il est probable qu’un Polyfill réponde déjà à vos besoins et soit disponible. Il est donc judicieux de rechercher et d'ajouter ce polyfill à votre projet.

Le support en CSS

L’usage grandissant des modules CSS de mise en page tels que Flexbox ou Grid est une grande avancée. Elle nous permet notamment un positionnement des blocs plus simples et plus logiques. Cependant, il faut encore une fois garder à l’esprit que ces nouveaux standards ne sont pas encore supportés par tous les navigateurs.

Les feature queries

Les feature queries ou règles @supports permettent d'établir des déclarations en fonction de la prise en charge du navigateur d'une ou plusieurs propriétés CSS. On peut rapprocher cette règle de la condition Javascript utilisée pour les fonctionnalités évoquées plus haut.

Voici un exemple :

// Le navigateur permet l'utilisation de la propriété display: grid
@supports (display: grid) {
 div {
   display: grid;
 }
}

// Le navigateur ne permet pas l'utilisation de la propriété display: grid
@supports not (display: grid) {
 div {
   float: right;
 }
}

Même si le support des features queries gagne du terrain, celles-ci ne sont pas encore supportées sur les versions d'Internet Explorer à l'heure actuelle.

Browser Hack

Pour cibler une version spécifique d’un navigateur en CSS, il existe des hacks. Bien que non recommandés, ces hacks peuvent s’avérer une solution de dernier recours lors d’un bug particulièrement gênant sur un navigateur spécifique.

Browserhacks.com dresse une liste complète de hacks CSS et Javascript pour tous les navigateurs. La méthode la plus simple pour l’utilisation de ces hacks en CSS reste l’utilisation de media queries spécifiques.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    // Code exécuté seulement sur les versions d’internet explorer 10 et ultérieures