Publicado: 7 de mayo de 2025, última actualización: 17 de septiembre de 2025
Browserslist es una de las herramientas más populares para configurar las versiones mínimas de los navegadores compatibles en las bases de código de frontend. Los desarrolladores agregan una consulta browserslist a su archivo package.json (o a otro punto de configuración de Browserslist, como un archivo .browserslistrc), y Browserslist expone una lista de los navegadores mínimos admitidos. Browserslist se puede usar con una amplia variedad de herramientas populares de linting, polyfilling y empaquetado, incluidas las siguientes:
- Autoprefixer
- Babel con
@babel/preset-env - PostCSS con
postcss-preset-env - ESLint con
eslint-plugin-compat - Stylelint con
stylelint-no-unsupported-browser-features - webpack
Objetivos de referencia
Cuando decidas usar Baseline, debes tener en cuenta tu base de usuarios y decidir qué conjunto de funciones de Baseline quieres segmentar:
- Baseline Widely available incluye todas las funciones web que fueron totalmente compatibles con el conjunto de navegadores principales de Baseline hace 30 meses o más.
- Los conjuntos de funciones del año de referencia, por ejemplo, Baseline 2020, incluyen todas las funciones que estaban disponibles recientemente al final del año especificado.
Según tu base de usuarios, es posible que puedas segmentar tus anuncios para que se muestren en la versión de Baseline Ampliamente disponible o que debas segmentarlos para que se muestren en una versión de Baseline anterior. Consulta tus herramientas de análisis o de RUM para comprender qué versiones de navegadores tienen tus usuarios.
Cómo segmentar los anuncios para que se muestren en la plataforma de Baseline como disponibles recientemente o disponibles de forma general
La compatibilidad con Baseline está integrada en Browserslist a través de varias consultas diferentes. Si quieres segmentar tu público para los navegadores de Baseline Newly available, intenta especificar baseline newly available en tu configuración de Browserslist:
{
...
"browserslist": [
"baseline newly available"
]
...
}
También puedes especificar baseline widely available como una búsqueda:
{
...
"browserslist": [
"baseline widely available"
]
...
}
Cómo segmentar tus anuncios para los años de referencia
Si deseas segmentar un conjunto de atributos del año de referencia, especifica el año en una consulta, como baseline 2024 si deseas segmentar el conjunto de atributos de 2024:
"browserslist": "baseline 2024"
Puedes especificar años desde baseline 2015 hasta el año actual.
Cómo especificar navegadores descendentes
El conjunto de navegadores principales de Baseline incluye Chrome, Edge, Firefox y Safari. Otros navegadores se basan en el mismo código de fuente abierta que Chrome y Edge (Chromium) y deberían admitir el mismo conjunto de funciones que la versión de Chromium que implementen. Para incluir estos navegadores en tu configuración de Baseline, agrega with downstream después de tu consulta de Baseline. Por ejemplo, para segmentar navegadores descendentes como parte de Baseline Widely available, especifica baseline widely available with downstream:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream es otra consulta válida, al igual que agregar with downstream a los objetivos anuales:
"browserslist": "baseline 2024 with downstream"
Ejemplos de consultas de referencia en acción
En las herramientas de empaquetado
Usar las consultas de Baseline que ofrece Browserslist en tu proyecto puede tener un efecto inmediato. Babel es una herramienta de compilación popular para empaquetar JavaScript. Si usas los valores predeterminados del paquete @babel/preset-env, muchos métodos y APIs de JavaScript modernos se reemplazarán por la sintaxis más detallada que requieren los navegadores más antiguos:
Sin embargo, usar una consulta de baseline 2020 para segmentar el conjunto de funciones de 2020 en el mismo proyecto de ejemplo reduce drásticamente el tamaño de salida de este JavaScript, ya que se requieren menos transformaciones de sintaxis:
Prueba esto por tu cuenta con el código de ejemplo en el repositorio baseline-demos de Google Chrome Labs.
En linters
Algunos verificadores de código ya funcionan con Browserslist o se pueden adaptar para que funcionen con él a través de un módulo de compatibilidad. Por ejemplo, stylelint puede consumir una configuración de browserslist con el módulo stylelint-browser-compat. Configura tu archivo stylelint.config.js para que use la consulta de referencia que elijas:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint ahora marcará el CSS que actualmente no forma parte de Baseline Widely available:
Stylelint también proporciona un complemento que te permite establecer reglas de Baseline directamente, pero si ya usas Browserslist para controlar tu configuración, usar las consultas de Baseline integradas que ofrece Browserslist es una solución viable.