¿Qué es Browserslist?

Browserslist (lista de navegadores) es una herramienta para proyectos frontend (independiente a PostCSS, pero desarrollada por los mismos creadores) que permite automatizar el grado decompatibilidad que tendrán algunas herramientas Javascript o CSS respecto a navegadores como Internet Explorer o versiones antiguas de Chrome, Firefox, Opera, Edge o incluso Node.

Esta herramienta permite al desarrollador indicar una lista de navegadores a las que quiere dar soporte y «avisar» a ciertas herramientas o utilidades de desarrollo para que realicen las operaciones oportunas para intentar garantizar que el proyecto funcione lo mejor posible en los navegadores o sistemas indicados.

Por ejemplo, Autoprefixer es una herramienta que añade prefijos CSS al código CSS estándar. Si lo integramos con Browserslist, podemos indicarle hasta que navegadores vamos a dar compatibilidad, por lo que sólo incluirá prefijos en los navegadores que hemos contemplado.

Dicho así, parece una herramienta increíble (y en cierta forma lo es), pero hay que dejar claro previamente que no se trata de una herramienta milagrosa, sino una utilidad que ahorra bastante tiempo y las aplicaciones adaptadas a ella suelen funcionar bastante bien, pero es tarea de dichas aplicaciones que realicen bien el trabajo. Browserslist sólo hace de intermediario para mediar entre desarrollador y sistema.

Soporte de Browserslist

Cada vez más herramientas son capaces de trabajar conjuntamente a browserslist, pero en el momento de escribir estas líneas, algunas de las herramientas más famosas que lo soportan son:

• El plugin autoprefixer de PostCSS para añadir prefijos CSS.
• El preset @babel/preset-env del transpilador Babel.
• El plugin postcss-preset-env de PostCSS (el babel de CSS).
• El plugin eslint-plugin-compat del linter de Javascript ESLint.
• El plugin stylelint-no-unsupported-browser-features del linter de CSS Stylelint.

Además, sistemas de generación de proyectos como create-react-app o @vue/cli vienen con browserslist integrado en las plantillas de los proyectos generados.

Instalación de Browserslist

Para instalar browserslist y hacerlo funcionar en nuestro proyecto, sólo tenemos que instalarlo con npm y el flag --save-dev, ya que es una herramienta de desarrollo:

$ npm install --save-dev browserslist

Esto incluirá el paquete en nuestro node_modules/ y podremos utilizarlo en nuestros proyectos. Ten en cuenta que muchas veces ya viene instalado en proyectos generados con herramientas cli automatizadas. Para saber si ha sido bien instalado (o si ya está instalado previamente en nuestro proyecto) podemos escribir lo siguiente:

$ npx browserslist --version
browserslist 4.14.0

Si browserslist está instalado correctamente, debería mostrarnos la versión instalada.

Configuración de Browserslist

Configurar browserslist es relativamente sencillo. Una vez instalado, si ejecutamos el comando npx browserslist nos mostrará la lista de navegadores a los que considera que debe dársele soporte:

$ npx browserslist
and_chr 84
and_ff 68
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
chrome 84
chrome 83
edge 84
edge 83
edge 18
firefox 79
firefox 78
firefox 77
firefox 68
ie 11
ios_saf 13.4-13.5
ios_saf 13.3
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 69
opera 68
safari 13.1
safari 13
samsung 12.0
samsung 11.1-11.2

Por defecto, estos son los navegadores que aparecen (en el momento de escribir este artículo). Tiene una configuración por defecto, y varía dependiendo de las versiones que vayan saliendo, puesto que los datos se obtienen de la plataforma CanIUse.

Observando la lista anterior, se puede deducir de que navegadores se trata. Los navegadores and_* son versiones para Android, ios_* para Apple, mientras que versiones normales como firefox, safari, chrome o similares son las versiones de escritorio, etc...

Estos navegadores aparecen porque son la configuración por defecto de Browserslist, es decir, el equivalente al valor defaults. Para configurarlo, la forma recomendada es editar el archivo package.json y editar una entrada browserslist (recuerda, la primera plural y la segunda singular):

{
  ...
  "browserslist": [ "defaults" ]
}

Dicha entrada tendrá un campo donde podremos ponerle los valores que más nos interesen dependiendo del proyecto. La anterior es la equivalente a no tener nada, el valor por defecto, pero podríamos incluir otras como veremos a continuación.

Existen otras formas para añadir los valores de browserslist, como por ejemplo, un fichero de texto plano llamado .browserslistrc en la carpeta raíz del proyecto. No obstante, se recomienda utilizar la opción del campo en el package.json, puesto que es la estándar.

Valores de Browserslist

Veamos cuales son los valores que podemos indicar en ese array de browserslist. Los valores pueden estar en mayúsculas o minúsculas (son pasados a minúsculas por browserslist) y la versión debe estar separada por un espacio en el caso de los navegadores de escritorio:

Puedes comprobarlos en browsersl.ist, separando por comas los valores que quieras. Para integrarlo en el proyecto, simplemente cambia el valor browserslist del package.json, indicando cada valor como un del y escribe npx browserslist para comprobar que está todo correcto.

Posibles errores de Browserslist

En el caso de escribir alguna palabra clave incorrecta en el package.json, al ejecutar npx browserslist nos mostrará un error al no reconocerla. Por ejemplo, si escribimos chromo en lugar de chrome, nos aparecerá un error similar al siguiente:

browserslist: Unknown browser query chromo. Maybe you are using old Browserslist or made typo in query.

Si indicamos chrome sin indicar a continuación una versión, el error que obtenemos será el siguiente (recuerda siempre indicar la versión mínima a soportar):

browserslist: Specify versions in Browserslist query for browser chrome

Cobertura de Browserslist

Una vez indicados unos valores específicos en el package.json, podemos ejecutar el comando npm browserslist --coverage para comprobar la cobertura de navegadores que estamos intentando soportar, de acuerdo a los datos de CanIUse. Por ejemplo, con los valores por defecto de browserslist, obtenemos la siguiente cobertura:

$ npx browserslist --coverage
These browsers account for 89.98% of all users globally

Esto significa que actualmente estamos intentando dar soporte al 89,98% de los navegadores utilizados en la actualidad a nivel mundial. Además, si indicamos el código del país como parámetro de la opción --coverage nos dará la cobertura para los navegadores en España:

$ npx browserslist --coverage="ES"
These browsers account for 92.88% of all users in the ES

Vemos que la cobertura mejora, y sube hasta un 92,88%, ya que en España el uso de navegadores es menos diverso que a nivel global.

Base de datos de Browserslist

Browserslist se nutre de una base de datos minimalista de CanIUse que tiene descargada de forma local, para acelerar el trabajo con los datos y no tener que consultarlo en cada ocasión. Es posible que con el tiempo, esta base de datos se vuelva obsoleta o no tenga datos tan actualizados como debería:

Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db

En cualquier momento podemos ejecutar el siguiente comando para actualizar esta base de datos local, descargándola en node_modules/ y teniendo una base de datos más aproximada a la realidad actual:

$ npx browserslist@latest --update-db
Current version: 1.0.30001113
New version: 1.0.30001113
Updating caniuse-lite…
caniuse-lite has been successfully updated

Listo. Con todo lo que hemos visto ya deberíamos saber utilizar browserslist con soltura. Puedes hacer pruebas con alguno de los plugins comentados en uno de los primeros apartados, como por ejemplo Autoprefixer.