Prefijos CSS de los navegadores

El uso de prefijos CSS específicos para navegadores ha disminuido considerablemente en los últimos años. Anteriormente, los prefijos como -webkit-, -moz-, -ms-, y -o- eran necesarios para habilitar funciones experimentales o nuevas de CSS en ciertos navegadores. Sin embargo, con la evolución de los estándares web y la mejor compatibilidad entre navegadores, hoy en día la mayoría de las propiedades CSS no requieren estos prefijos.

Aun así, en casos específicos donde una característica aún no está completamente estandarizada o no es compatible uniformemente entre navegadores, algunos prefijos podrían ser necesarios. Sin embargo, es recomendable consultarlos solo cuando sea estrictamente necesario, y usar herramientas como Can I use para verificar la compatibilidad de las propiedades CSS antes de añadir prefijos manualmente.

Además, existen herramientas como autoprefixer, que se encargan de añadir los prefijos automáticamente según las necesidades de compatibilidad de cada proyecto, lo que facilita mucho este proceso.

Veamos qué son estos prefijos y cómo implementarlos:

Prefijos CSS de los navegadores

Los navegadores tienen implementadas algunas de las nuevas características de CSS utilizando sus propias versiones de cada propiedad mediante prefijos. Esto se hace así para evitar los posibles errores ocasionados por las primeras implementaciones que aún no son estables. Por ello, los navegadores proporcionan valores utilizando sus prefijos propios y una declaración sin prefijo.

Después de un tiempo, cuando las especificaciones son estables, se eliminarán las propiedades con prefijo. Los prefijos para los navegadores más comunes son los siguientes:

Así por ejemplo para transformar un elemento en Firefox, es necesario utilizar la propiedad -moz-transform; en los navegadores basados en WebKit, como Safari y Google Chrome, se utiliza la propiedad -webkit-transform. Por este motivo, no es de extrañar que en algunos casos, tengamos que añadir hasta cuatro líneas de código para una única propiedad CSS.

transform: rotate(20deg);
-moz-transform: rotate(20deg); /* Firefox */
-webkit-transform: rotate(20deg); /* Safari y Chrome */
-o-transform: rotate(20deg); /* Opera */
-ms-transform: rotate(20deg); /* Internet Explorer y Microsoft Edge */

Es importante destacar que con el tiempo, muchos navegadores han adoptado estándares y ya no requieren prefijos para las propiedades CSS más comunes. Sin embargo, en algunos casos, especialmente cuando se trabaja con características experimentales, los prefijos todavía pueden ser útiles para garantizar la compatibilidad entre navegadores. Se pueden ver los navegadores que soportan una determinada propiedad CSS o un elemento HTML5 en la página caniuse.com.

1. Extensión Autoprefixer para Visual Studio Code

Para ahorrar tiempo y facilitarnos la tarea de incluir los prefijos de las propiedades CSS que todavía no son estables podemos hacer uso de la extensión «Autoprefixer» en Visual Studio Code.

Como vimos en la anterior unidad, para instalar una extensión en Visual Studio Code tenemos que acceder a view /extensions. Una vez instalada la extensión, en view /command palete (o Ctrl+shift+p) escribimos «autoprefixer run» para añadir todos los prefijos necesarios en una hoja de estilos. 

Puedes probar que funciona añadiendo esta propiedad en un estilo CSS y viendo cómo se insertan sus correspondientes prefijos:

user-select: none; /* controla si el usuario puede seleccionar el texto */
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Safari y Chrome */
-ms-user-select: none; /* Internet Explorer y Microsoft Edge */

Desde los ajustes de la propia extensión se puede indicar que se busque sin faltan prefijos cada vez que se guarda el documento.

2. Ejercicio propuesto

Realiza la instalación de la extensión y añade rápidamente todos los prefijos necesarios sobre una hoja de estilos que disponga de propiedades CSS que aún no sean estables.