Niveles de CSS y prefijos

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.

Niveles CSS

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

Si se desea 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, sólo son borradores o pueden variar en la especificación definitiva, por lo que los navegadores las implementan utilizando una serie de prefijos por navegador (vendor prefixes), que facilitan la segmentación de funcionalidades.

De esta forma, podemos utilizar varios prefijos para asegurarnos que aunque dichas funcionalidades tengan un comportamiento o sintaxis diferente en cada navegador, podemos hacer referencia a cada una de ellas por separado:

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 */
}

En el ejemplo anterior, la propiedad transform se refiere a los navegadores que tengan implementada la especificación definitiva por completo e ignorará el resto de propiedades. Por otro lado, otro navegador (o el mismo en una versión más antigua) puede tener implementada una versión anterior a la definitiva, por lo que hará caso a las propiedades con un prefijo concreto.

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 (el más popular, que forma parte de PostCSS) 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. Busca extensiones en el editor que utilices o la opción para activarlas, ya que te ahorrará mucho tiempo y te permitirá tener un código más legible y modular al no tener que repetir código.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.