Niveles de CSS y prefijos

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 intereses de empresas particulares, alejando la promoción de tecnologías propietarias e intentando aunar esfuerzos para satisfacer la demanda de características útiles e interesantes para el público.

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.

Existen múltiples grupos de trabajo que se enfocan en temáticas particulares, por ejemplo:

• WHATWG: Web Hypertext Application Technology Working Group
• CSSWG: CSS Working Group
• AGWG: Accesibility Guidelines Working Group
• WOTWG: Web of Things Working Group

Por ejemplo, desde hace algunos años, la comunidad WHATWG participa en el desarrollo y evolución de especificaciones como las de HTML, DOM u otras tecnologías relacionadas.

Niveles de CSS

Aunque muchas veces se habla de CSS3 casi como análogo de CSS, CSS no tiene una versión como tal, sino que hablamos de niveles. A lo largo de su historia, CSS ha ido evolucionado por diferentes niveles:

Nivel	Año	Descripción
CSS1	1996	Se crean propiedades para tipografías, 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	Se comienzan a crear características de CSS como módulos independientes

Desde 2011, la especificación CSS comienza a evolucionar separando sus nuevas funcionalidades en pequeños módulos, favoreciendo su implementación en navegadores. 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.

Por ejemplo, actualmente podemos decir que el módulo de Flexbox de CSS se encuentra en nivel 1, mientras que otros módulos como Grid se encuentran en nivel 2, o el módulo de características de Texto se encuentra en nivel 3.

Compatibilidad en navegadores

Debido al ritmo y la rápida velocidad de Internet en estas cuestiones, es muy complicado obtener una lista de funcionalidades de cada módulo CSS que se encuentren implementadas en cada navegador web, algo que además puede variar incluso en cuestión de semanas. Los desarrolladores necesitan tener información actualizada sobre las características disponibles en cada navegador, de modo que puedan aprovechar con exactitud esas novedades en su trabajo diario.

Herramienta CanIUse

Existe una herramienta estupenda para este cometido. La página Can I Use, es una web colaborativa mediante la cuál se puede saber el estado actual, previo e incluso futuro de las propiedades CSS, elementos HTML, o características Javascript disponibles en cada navegador.

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:

• Rojo: La característica no está soportada en dicha versión.
• Dorado: La característica no está soportada por completo en dicha versión.
• Verde: La característica está soportada en dicha versión.
• Guión en cuadrito amarillo: La característica se puede usar con prefijos.
• Bandera: La característica se puede activar mediante flags (ver más adelante).

Esta herramienta es una excelente forma de comprobar rápidamente el estado de ciertas características en determinados navegadores.

Prefijos CSS de navegador

Nota: El sistema de añadir prefijos en las propiedades está actualmente marcado como obsoleto, a favor de la configuración de flags en el navegador (ver más adelante).

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 vendor prefixes (prefijos por navegador), 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: ... /* El navegador implementa la especificación oficial */
  -webkit-transform: ... /* Chrome antiguo / Safari (Motor Webkit) */
     -moz-transform: ... /* Firefox antiguo (Motor Gecko) */
      -ms-transform: ... /* Internet Explorer (Motor Trident) */
       -o-transform: ... /* Opera antiguo (Motor Presto) */
}

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.

En el caso de querer utilizar vendor prefixes, recomiendo encarecidamente utilizar sistemas como Autoprefixer (plugin de PostCSS), una herramienta que añade de forma automática y transparente los prefijos, basándose en información de herramientas como Can I Use. Te ahorrará mucho tiempo y te permitirá tener un código más legible y modular al no tener que repetir y mantener ese código prefijado.

Flags de navegador

Actualmente, los vendor prefixes están en proceso de desaparecer. Las principales compañías de navegadores han optado por favorecer el uso de flags en el navegador del usuario para activar o desactivar opciones experimentales o crear especificaciones más pequeñas y breves que puedan ser estables mucho más rápido. Por esta razón, se aconseja utilizar vendor prefixes solo cuando necesitas soporte específico en navegadores muy antiguos.

En lugar de utilizar los prefijos a la hora de desarrollar, existe una forma denominada flags de navegador, donde en el caso de cada navegador puedes habilitar o deshabilitar opciones experimentales para probar ciertas características que aún no están terminadas, de modo que es el usuario del navegador el que decide si funcionarán o no.

Para ello, debes acceder a la dirección about:config en el caso de Firefox, o about:flags en el caso de Chrome. Activarás una sección experimental en el navegador donde puedes habilitar o deshabilitar características especiales (y generalmente inestables) para comprobar su funcionamiento.

En este ejemplo, puedes ver como las opciones experimentales CSS Container Queries y Experimental Web Platform features están activadas en Google Chrome.