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 y añadirlo en el fichero de configuración para activar el plugin:

Lo primero es instalarlo. Podemos hacerlo junto a browserslist para más posibilidades de configuración:

$ npm install -D 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 .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 el plugin de PostCSS 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.

Usar 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 pueden necesitar prefijos si queremos compatibilidad con navegadores muy antiguos. Para ello, creamos este archivo .css de prueba:

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

Si observamos el CSS generado, es posible que no se observe ninguna diferencia respecto al CSS original. Esto es posible que pase si las propiedades CSS tienen buen soporte en navegadores actuales. Sin embargo, podemos ajustar la compatibilidad a navegadores más antiguos.

Con browserslist podemos configurar ese grado de compatibilidad. Por ejemplo, podemos modificar el package.json para reemplazar el last 1 versions que pusimos anteriormente por un last 5 versions. En ese caso, en el CSS resultante obtendríamos este resultado:

.ejemplo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: anim 10s linear;
          animation: anim 10s linear;
}

Como vemos, se han añadido los prefijos -webkit-, -webkit-box y -ms-flexbox, para dar soporte a versiones más antiguas que no soportan las características de Flexbox.

Con estas guías y recomendaciones, podrás integrar Autoprefixer en cualquiera de tus proyectos y mantener una mejor compatibilidad hacia atrás.