Fecha de publicación: 7 de mayo de 2025
Browserslist es una de las herramientas más populares para configurar las versiones mínimas de navegadores compatibles en bases de código de frontend. Los desarrolladores agregan una consulta browserslist a su archivo package.json, y Browserslist expone una lista de navegadores compatibles mínimos. Browserslist se puede usar con una amplia variedad de herramientas populares de linting, polyfilling y empaquetado, como 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 el modelo de referencia, debes considerar tu base de usuarios y decidir a qué conjunto de atributos del modelo de referencia deseas segmentar tus anuncios:
- Estándar ampliamente disponible incluye todas las funciones web que el navegador principal del modelo de referencia admitía por completo hace 30 o más meses.
- Los conjuntos de funciones del año de referencia, por ejemplo, Base de referencia de 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 la versión de Baseline ampliamente disponible o que debas segmentar tus anuncios para un año anterior de Baseline. Consulta tus herramientas de estadísticas o RUM para comprender qué versiones de navegadores tienen tus usuarios.
Instalar browserslist-config-baseline
Una vez que decidas qué conjunto de funciones de Baseline deseas segmentar, puedes aplicar ese objetivo a tus herramientas para desarrolladores. La forma más sencilla de hacerlo para cualquier herramienta que use browserslist es instalar browserslist-config-baseline:
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
Cómo segmentar anuncios para el modelo de referencia está disponible de forma general
Para segmentar el modelo de referencia ampliamente disponible, actualiza o agrega una configuración de browserlist en package.json con la palabra clave extends:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Cuando browserslist cargue su lista de navegadores compatibles, browserslist-config-baseline generará de forma dinámica las versiones mínimas actuales del navegador que admitan todas las funciones que ahora están disponibles de forma general. También puedes agregar extends browserslist-config-baseline a un archivo .browserslistrc y se controlará de la misma manera.
Cómo segmentar tus anuncios para años de Baseline
Si deseas segmentar tus anuncios para un conjunto de atributos de año de referencia, agrega un / y el año en el formato YYYY al final de tu consulta browserslist:
"browserslist": "extends browserslist-config-baseline/2020"
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 código abierto que Chrome y Edge (Chromium) y deberían admitir el mismo conjunto de funciones que cualquier versión de Chromium que implementen.
browserslist-config-baseline usa baseline-browser-mapping para correlacionar las versiones de navegador con los conjuntos de funciones que admiten. Las asignaciones para UC Browser para dispositivos móviles y QQ Browser para dispositivos móviles están disponibles en baseline-browser-mapping, y es posible que se incluyan otros navegadores en el futuro.
Para incluir estos navegadores en la configuración de Baseline, agrega /with-downstream inmediatamente después del nombre del módulo en la configuración de browserslist:
"browserslist": "extends browserslist-config-baseline/with-downstream"
o:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Ejemplos de browserslist-config-baseline en acción
En las herramientas de empaquetado
Agregar browserslist-config-baseline a tu repositorio 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, configurar browserslist-config-baseline para apuntar al modelo de referencia de 2020 en el mismo proyecto de ejemplo disminuye de forma significativa el tamaño de salida de este código JavaScript, ya que se requieren menos transformaciones de sintaxis:
Pruébalo con el código de ejemplo del repositorio baseline-demos de Google Chrome Labs.
En linters
Algunos linters ya funcionan con Browserslist o se pueden hacer que funcionen con Browserslist mediante 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 usar browserslist-config-baseline:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint ahora marcará el CSS que actualmente no forma parte del modelo de referencia disponible de forma general:
Stylelint también proporciona un complemento que te permite establecer reglas de Baseline directamente, pero si ya usas browserslist para controlar tu configuración, browserslist-config-baseline es una solución integrada.
Cómo contribuir a browserslist-config-baseline
Si quieres realizar una solicitud de función para browserslist-config-baseline, crea un problema o una solicitud de extracción en el repositorio de GitHub.
Si quieres contribuir con más datos de navegadores downstream o informar un problema de datos, crea un problema o una solicitud de extracción en el repositorio de baseline-browser-mapping.