Détection de fonctionnalités ou identification du navigateur
Utilisez la détection de fonctionnalités plutôt que l’identification par l’agent utilisateur.
Détection de fonctionnalités ou identification du navigateur est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Deux approches de la compatibilité
Pour savoir si le navigateur actuel prend en charge une fonctionnalité, vous pouvez soit détecter directement la fonctionnalité ("IntersectionObserver" in window), soit analyser la chaîne de l’agent utilisateur (navigator.userAgent.includes("Chrome")). La première approche est fiable ; la seconde est une source de bogues récurrents.
Pourquoi l’analyse échoue
Les chaînes d’agents utilisateurs mentent. Edge prétend être Chrome (ainsi que Safari et Firefox). Chrome sur Android émet un UA différent de celui de Chrome sur iOS. Pour des raisons de confidentialité, les navigateurs respectent le « gel » de la chaîne UA. Toute logique fondée sur les chaînes UA se casse tous les quelques mois.
Modèle de détection des fonctionnalités
Vérifiez l’API réellement nécessaire au code : if ("IntersectionObserver" in window) { ... }. Si la propriété existe, le navigateur la prend en charge ; sinon, empruntez la voie de la solution de repli. Cette vérification est directe, rapide et pérenne.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}Détecter, puis utiliser
Associez la détection à une véritable solution de repli. Détecter une fonctionnalité absente n’est utile que si vous avez quelque chose à faire lorsqu’elle manque : charger un correctif de compatibilité, afficher une alternative statique ou masquer entièrement la fonctionnalité.
Requêtes de fonctionnalités CSS
CSS possède son propre mécanisme de détection des fonctionnalités : @supports (display: grid) { ... }. Le bloc ne s’applique que lorsque le navigateur comprend la paire propriété/valeur. Utilisez-le pour proposer des mises en page avec une grille et des solutions de repli fondées sur les flottants pour les navigateurs anciens.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}Indications client de l’agent utilisateur
Les navigateurs modernes exposent des informations structurées via navigator.userAgentData (Chromium uniquement). Cette propriété renvoie des paires marque+version plutôt qu’une chaîne libre. Préférez malgré tout la détection des fonctionnalités : les indications UA ne sont utiles que lorsque la capacité ne peut pas être déduite d’une vérification de propriété.
Quand l’analyse est acceptable
Le seul cas d’utilisation réellement valable de la détection par UA consiste à exclure des navigateurs connus pour leurs bogues, comme un bogue connu de Safari sur iOS dans la version X. Même dans ce cas, préférez les exclusions fondées sur les fonctionnalités (CSS.supports("aspect-ratio: 1")). La détection par UA doit rester un dernier recours.
Bibliothèques de type Modernizr
Modernizr regroupe de nombreuses détections de fonctionnalités et les expose sous forme de classes sur l’élément <html> (html.flexbox, html.no-flexbox). Les projets modernes en ont rarement besoin — la plupart des détections tiennent en une seule ligne — mais cette bibliothèque reste utile pour les migrations de systèmes anciens.
Tester la solution de repli
Une fois la détection en place, testez les deux chemins. Ouvrez DevTools, remplacez la fonctionnalité par undefined et vérifiez que la solution de repli fonctionne. Les solutions de repli non testées se détériorent : lorsqu’un utilisateur en a besoin, elles échouent souvent de façons que le développeur n’avait jamais imaginées.
Détection dans les cadres logiciels
React, Vue et les autres n’ont pas d’API spéciale de détection : utilisez du JavaScript ordinaire dans un effet ou lors de l’initialisation du composant. Les applications rendues côté serveur doivent effectuer la détection côté client, car "IntersectionObserver" in window vaut undefined pendant le SSR.
Éviter de déduire les capacités à partir de l’UA
Certaines équipes analysent l’UA pour deviner une capacité (« Est-ce un iPhone ? Il prend donc probablement en charge le tactile. »). Cela confond deux éléments sans rapport. Détectez directement le tactile avec "ontouchstart" in window ou, mieux encore, préférez les événements de pointeur qui font abstraction du mode d’entrée.
Vérification des connaissances
Pourquoi la détection des fonctionnalités est-elle préférable à l’analyse de l’agent utilisateur pour gérer les capacités des navigateurs ?
Résumé
Préférez la détection des fonctionnalités ("API" in window) à l’analyse de l’agent utilisateur. CSS propose @supports dans le même but. Associez toujours la détection à une véritable solution de repli et testez les deux chemins. L’analyse de l’UA doit être réservée à l’exclusion de versions de navigateurs connues pour leurs bogues, jamais à la supposition de capacités.
Questions Fréquemment Posées
La leçon « Détection de fonctionnalités ou identification du navigateur » est-elle gratuite ?
Oui — le texte complet de « Détection de fonctionnalités ou identification du navigateur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Détection de fonctionnalités ou identification du navigateur » ?
Utilisez la détection de fonctionnalités plutôt que l’identification par l’agent utilisateur. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Détection de fonctionnalités ou identification du navigateur » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La philosophie PE : commencer par le HTML
- Détection de fonctionnalités ou identification du navigateur
- Dégradation progressive ou amélioration progressive
- Créer un accordéon PE