Ya comentamos el concepto y el origen de los vendor prefixes, prefijos agregados a las propiedades de nuestras hojas de estilo para usar características CSS en fase de prueba. Los vendor prefixes siempre son recomendables para garantizar una mejor compatibilidad cross-browser, pero son especialmente importantes cuando sabemos que nuestros usuarios nos visitarán desde navegadores desactualizados. Al mismo tiempo, los desarrolladores de motores (los vendors en cuestión) usan estos prefijos para proponer implementaciones o sintaxis de características que pueden mejorar las que existen actualmente. En algunos casos, incluso «inventan» características tan buenas que terminan siendo adoptadas oficialmente. Sin embargo, los vendor prefixes son motivo de debate por varias razones:

• Hacen más repetitiva la hoja de estilos, volviéndola más pesada y difícil de mantener. Además, una vez que la propiedad adquirió la categoría de estándar y es ampliamente soportada por los browsers de nuestros usuarios, ya no tiene sentido conservar los prefijos, pero son pocos los desarrolladores que se toman el trabajo de eliminarlos.
• Algunos prefijos se orientan a motores utilizados por varios browsers al mismo tiempo, y esta variedad de browsers puede introducir diferencias visuales. Un caso especial es el prefijo -webkit-, que abarca a Chrome, Opera y Safari. Cabe destacar que, si bien Safari usa el motor WebKit, los dos restantes usan Blink, que es un desprendimiento de aquel.
• Algunas características son exclusivas de un motor y no terminan utilizándose en otros. En estos casos, la propiedad sólo funcionará para los usuarios de ese motor, lo cual supone una inconsistencia.

A pesar de estos problemas, los vendor prefixes seguirán existiendo en la medida en que los browsers incorporen propiedades CSS aún no estandarizadas por el W3C, un proceso que suele ser muy lento. Por eso, es bueno conocer algunas maneras de incorporar vendor prefixes a nuestros estilos:

Agregado manual

A través de las tablas de compatibilidad de Can I use podemos saber qué propiedades CSS necesitan prefijo, y para qué casos. Así podremos agregar manualmente solo los prefijos que creamos pertinentes en función de los browsers que utilizan nuestros usuarios, repitiendo la menor cantidad de código posible. Este proceso, sin embargo, es muy trabajoso cuando nuestra hoja de estilo tiene un volumen considerable.

Agregado automático

Hay varias aplicaciones que procesan nuestra hoja de estilo, originalmente sin prefijos, para agregarlos donde sea necesario:

• Prefixr. Con esta herramienta online, solo es cuestión de copiar y pegar nuestro código CSS para obtener una versión con los prefijos agregados. Tiene la ventaja de no requerir de ninguna biblioteca externa, pero es necesario repetir el proceso ante cada modificación importante de nuestro CSS.
• Autoprefixer. Este plugin tiene la ventaja de que podemos configurarlo para que soporte un rango de browsers determinado. Además, evalúa la necesidad de usar prefijos a partir de la base de datos de Can I use, confiable y en permanente crecimiento.
• -prefix-free. Este script no es tan configurable, pero es liviano y solo basta con invocarlo desde nuestro markup para que agregue prefijos a toda propiedad posible.

A pesar de que los vendor prefixes satisfacen una necesidad, algunos vendors están empezando a eliminarlos: hay una tendencia a deshabilitar por defecto las propiedades experimentales (el usuario tiene la opción de habilitarlas) y a usar solo aquellas cuya implementación ya esté suficientemente establecida.