Compatibilité des navigateurs et caniuse.com
Vérifiez la prise en charge des fonctionnalités selon les navigateurs sur caniuse.com, comprenez les préfixes de navigateur et utilisez des polyfills ou des solutions de repli lorsque nécessaire.
Compatibilité des navigateurs et caniuse.com est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi la compatibilité est-elle importante ?
Les différents navigateurs implémentent les standards du Web à des rythmes différents. Une propriété CSS ou une API JavaScript disponible dans Chrome 130 peut ne pas exister dans une ancienne version de Safari ou de Firefox. Tester et planifier la compatibilité évite de dégrader l’expérience de vos utilisateurs.
caniuse.com — votre référence en matière de compatibilité
Accédez à caniuse.com et saisissez une propriété CSS, une API JavaScript ou un attribut HTML. Vous verrez un tableau de prise en charge codé par couleur pour tous les principaux navigateurs et leurs versions récentes, ainsi que des statistiques d’utilisation et des remarques sur la prise en charge partielle.
Lire le tableau de caniuse
Vert = pris en charge. Jaune = prise en charge partielle. Rouge = non pris en charge. Gris = état inconnu. Vérifiez le pourcentage d’utilisation mondial en haut de la page : si au moins 97 % des utilisateurs disposent de cette fonctionnalité, vous pouvez généralement l’utiliser sans solution de repli.
browser-compat-data et MDN
Les pages MDN Web Docs incluent un tableau de compatibilité des navigateurs au bas de chaque page de référence d’API. Il utilise les mêmes données que caniuse et est fréquemment mis à jour par les éditeurs de navigateurs eux-mêmes.
L’initiative Baseline
L’initiative Baseline (web.dev/baseline) classe les fonctionnalités comme nouvellement disponibles ou largement disponibles selon leur prise en charge par Chrome, Edge, Firefox et Safari. Une fonctionnalité largement disponible peut être utilisée sans polyfills en toute sécurité.
Polyfills
Un polyfill est du code JavaScript qui implémente une API récente dans les anciens navigateurs. Sources populaires : polyfill.io (livre uniquement les polyfills nécessaires), core-js (polyfills JavaScript complets) et les assistants Babel.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — Requêtes de fonctionnalités en CSS
@supports permet d’écrire du CSS qui ne s’applique que lorsqu’une propriété est prise en charge. Il fournit des solutions de repli en CSS, de façon comparable aux remplacements réactifs fournis par les requêtes de média.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Préfixes spécifiques aux fournisseurs (anciens)
Les anciennes fonctionnalités CSS nécessitaient des préfixes spécifiques aux fournisseurs : -webkit-, -moz-, -ms-. Ils sont désormais largement obsolètes : les navigateurs modernes utilisent les propriétés standard sans préfixe. Autoprefixer, un plug-in PostCSS, les ajoute automatiquement si nécessaire.
Transpilation avec Babel
Babel compile le JavaScript moderne (ES2022 ou version ultérieure) vers ES5, que les anciens navigateurs peuvent exécuter. Vite et webpack intègrent Babel au moyen de plug-ins. Configurez les navigateurs cibles dans browserslist, dans package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Tests sur de vrais navigateurs
L’émulation d’appareils des DevTools ne remplace pas les tests sur de vrais navigateurs. Utilisez BrowserStack, Sauce Labs ou le navigateur Safari réel (macOS ou iOS est requis) pour une véritable validation inter-navigateurs.
Le paysage des navigateurs à mise à jour automatique
Chrome, Edge, Firefox et Safari se mettent tous à jour automatiquement. La longue traîne des navigateurs obsolètes diminue chaque année. Pour la plupart des produits grand public, cibler les deux dernières versions majeures de chaque navigateur couvre plus de 95 % des utilisateurs.
Vérification rapide
Qu’indique une cellule verte dans le tableau de prise en charge de caniuse.com ?
Récapitulatif : compatibilité des navigateurs
Consultez caniuse.com avant d’utiliser de nouvelles API. Lisez les tableaux de compatibilité de MDN. Ciblez des ensembles de navigateurs raisonnables avec browserslist. Utilisez @supports pour les requêtes de fonctionnalités CSS. N’ajoutez une couche de compatibilité que lorsque c’est nécessaire. Transpilez le JS moderne avec Babel. Effectuez des tests sur de vrais navigateurs pour les fonctionnalités critiques.
Questions Fréquemment Posées
La leçon « Compatibilité des navigateurs et caniuse.com » est-elle gratuite ?
Oui — le texte complet de « Compatibilité des navigateurs et caniuse.com » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Compatibilité des navigateurs et caniuse.com » ?
Vérifiez la prise en charge des fonctionnalités selon les navigateurs sur caniuse.com, comprenez les préfixes de navigateur et utilisez des polyfills ou des solutions de repli lorsque nécessaire. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 4 sur 4.
Combien de temps prend la leçon « Compatibilité des navigateurs et caniuse.com » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Chrome DevTools : Elements, Console, Network
- VSCode : extensions, Emmet et raccourcis
- Configuration de Prettier et ESLint
- Compatibilité des navigateurs et caniuse.com