Como desarrolladores front-end, somos conscientes de que los diferentes navegadores (y versiones) admiten diferentes funciones de la plataforma web. Tomamos decisiones basadas en el soporte de esas funciones en equilibrio con lo que nos dicen los análisis sobre los navegadores que usan nuestros usuarios. Por ejemplo, si nuestro Google Analytics nos dice que solo el 0.01% de los usuarios se quedan en IE 9, quizás decidamos que está bien comenzar a usar Flexbox y .classList.
Ingrese Autoprefixer. Autoprefixer se ha convertido en una parte omnipresente de los procesos de creación de CSS porque nos ayuda con la compatibilidad entre navegadores casi sin esfuerzo. Aunque IE 10 solo admitía una sintaxis de Flexbox más antigua, no tuvimos que preocuparnos por eso porque Autoprefixer hizo lo mejor para portar la sintaxis moderna a la anterior, e hizo un gran trabajo en eso.
Autoprefixer le permite configurar los navegadores a los que desea apuntar con el prefijo. Esto significa que no tiene que generar prefijos para todos los navegadores (lo que da como resultado potencialmente más código de salida de lo que desea), sino que solo genera prefijos para los navegadores que ha decidido admitir. Hay muchas formas de usar Autoprefixer, pero digamos que es parte de tu compilación de Grunt:
grunt.initConfig({
autoprefixer: {
options: {
options: {
browsers: ['last 2 versions', 'ie 8', 'ie 9']
}
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});Como puede adivinar, la configuración de Autoprefixer se procesará en función de las últimas 2 versiones de todos los navegadores principales, además de hacer específicamente lo que se necesita para IE 8 e IE 9.
Eso es genial, pero Autoprefixer no es la única herramienta que existe para tomar decisiones sobre las versiones del navegador.
Por supuesto.
Apuesto a que muchos de ustedes han trabajado con Babel o al menos han oído hablar de él. Escribe JavaScript tan moderno como desee y lo procesa en JavaScript que se ejecutará en navegadores más antiguos. Existe un proyecto llamado babel-preset-env que le permite configurar los navegadores en los que se compilará Babel. Por ejemplo:
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["Edge 15"]
}
}
]
]
},Ahí estamos apuntando específicamente a Edge 15. Solo como un pequeño ejemplo, Babel ni siquiera se molestará en convertir nada en const a = `string`; porque Edge 15 admite const y “comillas invertidas”. Pero si le dijéramos que también apunte a IE 10, obtendríamos var a = "string";.
Browserslist se trata de una única configuración para todas las herramientas que necesitan saber qué navegadores son compatibles.
Acabamos de ver dos herramientas principales que se pueden configurar en función de qué navegadores admitir: Autoprefixer y Babel. ¿No tiene sentido apuntar a la misma lista de navegadores? (Sí.)
Ingrese a Browserslist.
browserl.ist te ayuda a ver exactamente a qué navegadores te diriges en función de una cadena de configuración.
Con Autoprefixer, con solo tener una configuración de Browserslist, lo usará automáticamente.
{
"browserslist": [
"> 1%",
"last 2 versions",
"IE 10"
]
}Ese es un ejemplo de tener la configuración almacenada en su archivo `package.json`. Sin embargo, hay otras formas de asegurarse de que la configuración de una lista de navegadores esté disponible, como tener una BROWSERSLIST variable de entorno o un archivo de puntos de configuración `.browserslistrc`.
Babel todavía requiere babel-preset-env.
Hay otras herramientas interesantes que utilizan Browserslist.
Por ejemplo, su configuración de linting se puede configurar para advertirle si usa código que no es compatible fuera de la configuración de su Browserslist. Esto se hace con el complemento eslint-plugin-compat para ESLint.
En el lado de CSS, se puede hacer lo mismo con stylelint y el complemento stylelint-no-unsupported-browser-features.
Esas cosas se sienten como una extensión natural de Browserslist, y es realmente genial que ya existan. Quizás un poco más sorprendente sea PostCSS Normalize, que en realidad crea un “restablecimiento” de CSS (Normalizar no es realmente un restablecimiento, pero ya sabes a qué me refiero, maneja las diferencias entre navegadores en CSS) basado en los navegadores de tu objetivo.
Si desea leer un poco más, consulte el artículo Autoprefixer 7.0 y Browserslist 2.0 de los desarrolladores detrás de estos proyectos.
Aún mejor, consulte un repositorio de ejemplo de todas estas cosas combinadas en un ejemplo mínimo.