Autoprefixer es un plugin de PostCSS que permite analizar código CSS estándar y añadir los vendor prefixes de CSS necesarios para garantizar que la funcionalidad se adapte lo mejor posible a navegadores antiguos. De esta forma, no tenemos que hacerlo de forma manual y mantener ese código, lo que habitualmente tiende a ser imposible.
Esta herramienta ofrece varias ventajas interesantes:
Nota: Los prefijos CSS son una característica que parece que tenderá a desaparecer con el tiempo. Actualmente, aún son necesarias, sobre todo para dar soporte a navegadores antiguos. Sin embargo, las principales compañías de navegadores (Microsoft, Google, Mozilla, Apple y Opera) tienen como objetivo dejar de utilizarlas.
Recuerda que Autoprefixer, aunque nació como una herramienta independiente, actualmente funciona como plugin de PostCSS. Por lo tanto, el primer paso es instalarlo en nuestro proyecto (junto a PostCSS) y configurar el fichero de configuración para que active el plugin.
Para instalarlo, podemos hacerlo con npm
y el flag --save-dev
:
$ npm install --save-dev postcss-cli autoprefixer browserslist
Una vez instalado, editamos nuestro fichero de configuración de PostCSS, postcss.config.js
, activando el plugin para que se procese cada vez que ejecutemos PostCSS para transpilar un fichero .pcss
:
module.exports = {
"plugins": {
"autoprefixer": true
}
}
Y aunque por defecto, Browserslist tiene una configuración determinada fijada, podemos establecer la nuestra añadiendo en el package.json
el campo browserslist
con el valor que más nos interese:
{
...
"browserslist": [ "last 1 versions" ]
}
En resumen, hemos instalado PostCSS, el plugin Autoprefixer y la herramienta Browserslist. Hemos configurado PostCSS para utilizar Autoprefixer y hemos configurado Browserslist para indicar el grado de compatibilidad de navegadores que deseamos, que es, de los navegadores populares, todas las verisones desde la última versión hasta la inmediatamente anterior.
Vamos a crear un fichero .pcss
de ejemplo, donde vamos a utilizar las características Flexbox y la de Animaciones CSS, ya que ambas suelen necesitar prefijos en la actualidad. Para ello, creamos este archivo .pcss
de prueba:
.ejemplo {
display: flex;
animation: anim 10s linear;
}
Si ejecutamos PostCSS con el comando npx postcss index.pcss --no-map
nos generará el siguiente resultado:
.ejemplo {
display: flex;
-webkit-animation: anim 10s linear;
animation: anim 10s linear;
}
Podemos ver que ha añadido el prefijo -webkit-
a la propiedad animation
, ya que el navegador Safari (usa webkit), en su versión anterior a la actual necesita prefijos para funcionar.
Recuerda que autoprefixer
soporta browserslist, por lo que podemos configurar el grado de compatibilidad con navegadores antiguos. Por ejemplo, podemos modificar el package.json
para reemplazar el last 1 versions
que pusimos anteriormente por un last 5 versions
. En ese caso, al ejecutar PostCSS, obtendríamos este resultado:
.ejemplo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-animation: anim 10s linear;
animation: anim 10s linear;
}
En este caso, ha añadido también los prefijos -webkit-box
y -ms-flexbox
, para dar soporte a versiones más antiguas que necesitan prefijos para hacer funcionar la característica Flexbox.
Con estas guías y recomendaciones, podrás integrar Autoprefixer en cualquiera de tus proyectos y mantener una mejor compatibilidad hacia atrás.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev