Autoprefixer: Prefijos CSS

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:

• No tienes que añadir los prefijos CSS manualmente.
• No tienes que mantener las propiedades prefijadas y sus valores (difícil de mantener).
• Los prefijos se añaden de forma automática según los datos de CanIUse.
• Al generarse prefijos automáticamente, cada vez que retomes el proyecto, se adaptarán mejor a la actualidad, ya que los navegadores van evolucionando y se va perdiendo soporte de las versiones más antiguas.

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.

Instalación de Autoprefixer

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 -D o --save-dev:

$ npm install -D postcss-cli autoprefixer browserslist

Una vez instalado, editamos nuestro fichero de configuración de PostCSS, postcss.config.mjs, activando el plugin para que se procese cada vez que ejecutemos PostCSS para transpilar un fichero .css:

export default {
  "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.

Ejecutando Autoprefixer

Vamos a crear un fichero .css 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 .css de prueba:

.ejemplo {
  display: flex;
  animation: anim 10s linear;
}

Si ejecutamos PostCSS con el comando npx postcss index.css --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.