Publié le 7 mai 2025, dernière mise à jour le 17 septembre 2025
Browserslist est l'un des outils les plus populaires pour configurer les versions minimales des navigateurs compatibles dans les bases de code frontend. Les développeurs ajoutent une requête browserslist à leur fichier package.json (ou à un autre point de configuration pour Browserslist, tel qu'un fichier .browserslistrc), et Browserslist expose une liste des navigateurs minimaux compatibles. Browserslist peut être utilisé avec un large éventail d'outils de linting, de polyfilling et d'empaquetage populaires, y compris :
- Autoprefixer
- Babel avec
@babel/preset-env - PostCSS avec
postcss-preset-env - ESLint utilisant
eslint-plugin-compat - Stylelint avec
stylelint-no-unsupported-browser-features - webpack
Cibles de référence
Lorsque vous décidez d'utiliser Baseline, vous devez tenir compte de votre base d'utilisateurs et choisir l'ensemble de fonctionnalités Baseline que vous souhaitez cibler :
- Baseline Widely available inclut toutes les fonctionnalités Web qui étaient entièrement compatibles avec l'ensemble de navigateurs de base Baseline il y a 30 mois ou plus.
- Les ensembles de fonctionnalités de l'année de référence, par exemple Référence 2020, incluent toutes les fonctionnalités nouvellement disponibles à la fin de l'année spécifiée.
Selon votre base d'utilisateurs, vous pourrez peut-être cibler la référence "Largement disponible" ou devrez peut-être cibler une année de référence plus ancienne. Consultez vos outils d'analyse ou RUM pour connaître les versions de navigateur utilisées par vos utilisateurs.
Cibler les fonctionnalités de base nouvellement ou largement disponibles
La compatibilité avec Baseline est intégrée à Browserslist via différentes requêtes. Si vous souhaitez cibler les navigateurs de référence récemment disponibles, essayez de spécifier baseline newly available dans votre configuration Browserslist :
{
...
"browserslist": [
"baseline newly available"
]
...
}
Vous pouvez également spécifier baseline widely available comme requête :
{
...
"browserslist": [
"baseline widely available"
]
...
}
Cibler des années de référence
Si vous souhaitez cibler un ensemble de fonctionnalités d'une année de référence, vous devez spécifier l'année dans une requête, par exemple baseline 2024 si vous souhaitez cibler l'ensemble de fonctionnalités de 2024 :
"browserslist": "baseline 2024"
Vous pouvez spécifier des années comprises entre baseline 2015 et l'année en cours.
Spécifier les navigateurs en aval
L'ensemble de navigateurs de base inclut Chrome, Edge, Firefox et Safari. D'autres navigateurs sont basés sur le même code Open Source que Chrome et Edge (Chromium). Ils devraient donc être compatibles avec les mêmes fonctionnalités que la version de Chromium qu'ils implémentent. Pour inclure ces navigateurs dans votre configuration de référence, ajoutez with downstream après votre requête de référence. Par exemple, pour cibler les navigateurs en aval dans la catégorie "Baseline Widely available", spécifiez baseline widely available with downstream :
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream est une autre requête valide, tout comme l'ajout de with downstream aux cibles annuelles :
"browserslist": "baseline 2024 with downstream"
Exemples de requêtes de référence en action
Dans les outils d'emballage
L'utilisation des requêtes de référence proposées par Browserslist dans votre projet peut avoir un effet immédiat. Babel est un outil de compilation populaire pour l'empaquetage de JavaScript. Si vous utilisez les paramètres par défaut du package @babel/preset-env, de nombreuses API et méthodes JavaScript modernes seront remplacées par la syntaxe plus détaillée requise par les anciens navigateurs :
Toutefois, l'utilisation d'une requête baseline 2020 pour cibler l'ensemble de fonctionnalités 2020 sur le même exemple de projet réduit considérablement la taille de sortie de ce code JavaScript, car moins de transformations de syntaxe sont nécessaires :
Essayez vous-même en utilisant l'exemple de code dans le dépôt baseline-demos de Google Chrome Labs.
Dans les linters
Certains linters fonctionnent déjà avec Browserslist ou peuvent être rendus compatibles avec Browserslist à l'aide d'un module de compatibilité. Par exemple, stylelint peut consommer une configuration browserslist à l'aide du module stylelint-browser-compat. Configurez votre fichier stylelint.config.js pour qu'il utilise la requête de référence de votre choix :
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint signalera désormais le code CSS qui ne fait pas partie de la référence largement disponible :
Stylelint fournit également un plug-in qui vous permet de définir directement des règles de référence. Toutefois, si vous utilisez déjà Browserslist pour gérer votre configuration, l'utilisation des requêtes de référence intégrées proposées par Browserslist est une solution viable.