Nous l’avons vu dans un précédent article, la propriété CSS @supports permet au moteur de rendu de tester la présence ou non d’une fonctionnalité. Nous avons cependant noté qu’elle n’était pas supporté par Internet Explorer, ce qui limite son intérêt dans l’immédiat. Une autre solution pour tester le support d’une fonctionnalité est la librairie Modernizr.
Modernizr est une librairie JavaScript qui permet de détecter le support de différentes fonctionnalités CSS et JS afin de créer des règles ou des fonctions spécifiques en fonction du support ou non d’une fonctionnalité.
Pour cela, on commence par se créer un build personnalisé en fonction de nos besoins en cochant les fonctionnalités que l’on souhaite détecter : modernizr.com/download. On peut ainsi détecter si une propriété CSS est utilisable sur le navigateur, si un événement est disponible, si une balise HTML est reconnue, … On peut également inclure HTML5 Shiv qui active les balises HTML5 dans les vieux navigateurs (Internet Explorer 6-9, Safari 4, Firefox 3, …).
Exemples d’utilisation :
/* Ici, on justifie le texte si la propritété hyphens est gérée par le navigateur */ .no-csshyphens p { text-align: left; } .csshyphens p { text-align: justify; hyphens: auto; } |
/* Ici, on affiche un lien sous forme de bouton si l'événement touch est géré. On utilise la pseudo-classe :active si c'est le cas, :hover sinon. */ .no-touchevents a:hover { text-decoration: underline; } .touchevents a { display: inline-block; padding: 5px; border: 3px solid black; text-decoration: none; } .touchevents a:active { background: black; color: white; } |
// Ici, on vérifie en JavaScript que l'API battery est gérée par le navigateur. if (Modernizr.batteryapi) { var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; // ... } else { console.log("Batterie non gérée"); } |
Il existe beaucoup d’autres méthodes utilisables. Elles sont toutes visibles dans la documentation. Il est également possible d’ajouter ses propres méthodes de détection.
Sources :