Los prefijos CSS indican a los diferentes navegadores que realicen una acción que aún no está implementada sin influir con otros. Se recomienda utilizar herramientas como autoprefixer.

El lenguaje CSS es una especificación desarrollada y mantenida por el World Wide Web Consortium (W3C), una comunidad internacional que se encarga de desarrollar estándares para asegurar el crecimiento y la neutralidad de la web, independizándolo de tecnologías propietarias e intentando aunar esfuerzos para satisfacer la demanda de características útiles e interesantes.

En el consorcio participan y colaboran prácticamente casi todas las empresas relacionadas con Internet, como por ejemplo Apple, Adobe, Akamai, Cisco, Google, Facebook, HP, Intel, LG, Microsoft, Nokia, Twitter, Yahoo, entre muchos otros.

A lo largo de su historia, CSS ha evolucionado en diferentes versiones, denominados niveles:

Nivel Año Descripción
CSS1 1996 Propiedades de fuente, colores, alineación, etc...
CSS2 1998 Propiedades de posicionamiento, tipos de medios, etc...
CSS2.1 2005 Corrige errores de CSS2 y modifica ciertas propiedades
CSS3 2011 Inicio de módulos separados con funcionalidades nuevas

Para los curiosos, en la página de la Wikipedia, hay un documento detallado donde se pueden ver las características CSS disponibles en cada navegador, clasificadas según el motor interno que utiliza cada navegador. Si se quiere información más técnica, se puede consultar la evolución de los diferentes módulos relacionados con CSS en la página web del consorcio W3C.

Prefijos

Algunas de las propiedades que veremos no están definidas por completo o son sólo borradores, por lo que algunos navegadores no las implementan siguiendo la especificación al pie de la letra, sólo funcionan parcialmente o simplemente funcionan de forma diferente dependiendo del navegador que se utilice.

Para evitar el problema, se idearon una serie de prefijos por navegador (vendor prefixes), que facilitan la segmentación de funcionalidades:

div {
            transform: ...  /* Navegador con especificación oficial */
    -webkit-transform: ...  /* Chrome, Safari, Opera... (Motor WebKit) */
       -moz-transform: ...  /* Mozilla Firefox */
        -ms-transform: ...  /* Microsoft Internet Explorer */
         -o-transform: ...  /* Antiguo opera */
}

De esta forma, podemos utilizar varios prefijos para asegurarnos que aunque dichas funcionalidades tengan un comportamiento o sintaxis diferente, podemos hacer referencia a cada una de ellas por separado. Los navegadores que ya implimenten la funcionalidad transform harán lo que se define en la primera regla e ignorará el resto, y así con los casos siguientes.

Debido al ritmo y la rápida velocidad de Internet en estas cuestiones, es muy complicado obtener una lista de funcionalidades implementadas en cada navegador, algo que puede variar incluso en cuestión de semanas. Aconsejo utilizar la página Can I Use, una web colaborativa para saber el estado actual, previo e incluso futuro de las propiedades CSS o elementos HTML en cada navegador.

Can I Use: Soporte de la propiedad CSS filter

En esta página se puede buscar, a través de un buscador y de forma rápida y cómoda, el estado de ciertas características por parte de las diferentes versiones de los navegadores.

Truco: Recomiendo encarecidamente utilizar sistemas como autoprefixer o prefix-free que añaden de forma automática y transparente los prefijos, basándose en información de herramientas como Can I Use. Si utilizas editores como CodePen, Sublime Text, Atom o Adobe Brackets, busca extensiones o la opción para activarlas, te ahorrará mucho tiempo y permitirá tener un código más legible y modular, ya que no tendrás que repetir código.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).