11. Prefijos CSS de los navegadores
Actualmente los navegadores tienen implementadas muchas de las nuevas características de CSS3 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:
| Prefijo | Navegador |
| -moz- | Firefox |
| -webkit- | Safari y Chrome |
| -o- | Opera |
| -khtml- | Konqueror |
| -ms- | Internet Explorer |
| -chrome- | Google Chrome |
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.
Se pueden ver los navegadores que soportan una determinada propiedad CSS o un elemento HTML5 en la página caniuse.com.
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 “autoprefix css” para añadir todos los prefijos necesarios en una hoja de estilos.
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.