CSS Houdini, the final trick

¿Qué es la magia? Una ilusión que engaña nuestros sentidos o un reflejo de la realidad que nosotros elegimos. De hecho, iré aún más allá, ¿dónde reside la magia?, ¿en una baraja de cartas? ¿en un conejo bajo la chistera?, ¿o en unas palabras que enardezcan la determinación del individuo? La magia puede ser cualquier cosa que nos rodea, pero y si nos lo llevamos a la web, la magia puede ser la perfecta ilusión que crea una satisfactoria experiencia de usuario.

En una web, los trazos que dibujan esa magia se conocen como CSS, se trata de un lenguaje que posee una especificación estandarizada por parte de W3C donde por medio de una sintaxis damos estilo a nuestra web.

¿Cómo funciona realmente CSS?

El navegador muestra información a la par que aplica estilos. Lo hace por medio de una serie de etapas, en las que transforma ambos archivos en una representación visual interactiva en el dispositivo del usuario.

houdini-css

El motor de renderizado del navegador solicita el archivo HTML, tras la obtención de este construye el DOM (Document Object Model), una interfaz de programación de aplicaciones que define la estructura lógica del documento, creando un árbol de nodos que podemos mapear para su manipulación.

motor de renderizado - houdini

Mientras el navegador construye el DOM, se da cuenta de la existencia de una referencia a un archivo externo, nuestra hoja de estilo CSS. Tras esta última revelación, crea el CSSOM (Cascade Style Sheet Object Model), tomando como referencia los conceptos del DOM y aplicándole una serie de reglas y propiedades, que se aplican tanto a un elemento como a un documento HTML.

 

Y finalmente, renderiza la representación visual de nuestros archivos, creando el conjunto de nuestra página web. Pero dada la diversidad de navegadores, ¿todos funcionan igual? La respuesta es No. Pueden tener su propio motor de renderizado, de tal manera que cada uno realiza esa interpretación de los estilos CSS de manera distinta.

buscadores

La representación visual por parte del motor de renderizado pasa por una serie de fases en la manera que interpreta las distintas propiedades CSS, y algunas de ellas suponen un mayor coste que otras.

Una vez que se han parseado los archivos, se han construido los objetos DOM y CSSOM, y se han aplicado las reglas de CSS, entramos en la fase del pintado de los elementos:

  • Layout: Aplica la posición además del espacio que ocupará el elemento en el navegador. Es un proceso en el que cada elemento puede afectar a otros.
  • Paint: Rellena píxel por píxel los elementos de la pantalla
  • Composite: Este proceso combina todas las capas. Su cometido es especialmente importante para los elementos superpuestos. Cualquier error aquí puede suponer que existan elementos posicionados incorrectamente por encima de otros.

Por otro lado, es importante destacar que cuando se realizan animaciones en la web, las fases de layout, paint y composite se vuelven a ejecutar, dado que supone un cambio en las propiedades y toman de referencia el valor inicial de estas. Sin embargo, no todos los navegadores realizan estos cambios pasando por las mismas fases.

El desarrollador web Paul Lewis, realizó una investigación sobre este cambio de valores en las propiedades, ya que no todas son animables ni suponen el mismo coste de renderizado para el navegador. Creó un proyecto donde poder ver todas las propiedades CSS en los principales motores, para así tener en cuenta precisamente este impacto en el navegador. También redacto un articulo de dicha iniciativa explicando su construcción.

css-triggers

Anteriormente hablábamos de que los navegadores, en función de su motor de renderizado, podía interpretar las propiedades CSS de manera distinta al resto. Es decir, existe la posibilidad de que un navegador no entienda una propiedad.

Utilizar las ultimas características de CSS, siempre ha sido un proceso largo y tedioso, donde los navegadores se van adaptando a las nuevas propuestas de la W3C. Tanto la sintaxis como sus propiedades son muchas y muy variadas. Debido a esta problemática, surgen recursos como caniuse que nos permite consultar la compatibilidad de las distintas versiones de los principales navegadores que existen actualmente.

css-houdini

Es común encontrarse que navegadores antiguos como Internet Explorer, destaquen especialmente en esto último. Entonces, ¿qué pasa cuando un navegador no entiende una propiedad? Simplemente la ignora y pasa de largo. La solución surge con la implantación de los polyfills.

Un polyfill es un fragmento de código (generalmente escrito en Javascript) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa.

El término “polyfill” proviene de la marca polyfilla, que se utiliza ampliamente en Gran Bretaña y que, en realidad, es una pasta de relleno para trabajos de renovación y reacondicionamiento. Debido a su función como masa para rellenar agujeros en las paredes, el desarrollador web Remy Sharp encontró en ella la comparación adecuada para resolver este problema, razón por la cual los bautizó así en su libro “Introducing HTML5”, escrito con Bruce Lawson en 2009. Polyfill fue entonces adoptado como el nombre oficial.

Sin embargo, al crear un polyfill se vuelve a ejecutar el proceso, parseando los estilos para modificar la propiedad que hemos adaptado y por último se volvería a insertar en el DOM.

Como os imaginareis, hacer esto representa un coste adicional en el rendimiento del navegador, el cual es completamente necesario y asumible, pero sabiendo que el mayor consumo de contenidos proviene de los dispositivos móviles, debemos tener especial atención para minimizar este impacto.

houdini

Debido a esto y al largo proceso por el que pasa una nueva propiedad CSS hasta que es compatible con todos los navegadores, la W3C creó una nueva iniciativa para resolver este problema de una vez por todas, llamado el proyecto Houdini.

¿Qué es el proyecto Houdini?

El proyecto Houdini es un trabajo en conjunto de Mozilla, Apple, Opera, Microsoft, HP, Intel y Google para poder exponer APIs que nos permitan trabajar con ciertas partes del motor de CSS.

Como bien hemos dicho antes, utilizar los últimos avances del estándar de la W3C siempre ha supuesto un largo periodo de tiempo que pasa por varias fases antes de que sea añadida como nueva característica. Por ejemplo, flexbox que facilita mucho el diseño responsive, se propuso por primera vez en 2009 y aún existen navegadores que no ofrecen compatibilidad en todo su conjunto.

houdini

¿Qué implicaciones tiene el proyecto Houdini?

El tener control sobre como los navegadores pintan la página crea un nuevo paradigma donde los límites los pones tú y tu imaginación, como la magia. Entre muchas de sus posibilidades recalcaremos sus mayores virtudes:

  • Poder normalizar como los navegadores implementan ciertas características.
  • Crear plugins o polyfills que insertaríamos en el CSSOM sin tener que repetir de nuevo el proceso para poder implementar nuevas características que no están soportadas o son solo propuestas. Por lo que nos ahorraríamos ese coste añadido de rendimiento que ya hemos comentado.

CSS Houdini nos permite extender CSS a través de Javascript. Es importante recalcar esto último, ya que actualmente no es posible hacerlo. El conjunto de APIs que lo conforman son las siguientes:

  • Animation Worklet API: Nos da la posibilidad de controlar la ejecución de las animaciones creando un alto grado de aislamiento en el rendimiento del hilo principal.
  • Layout API: Nos permite crear un custom display donde podríamos construir nuestras propias versiones de flex o grid, por ejemplo.
  • Paint API: Se ocupa de rellenar imágenes y bordes como atributos CSS, lo que le permite dibujar en estos elementos como si de un lienzo se tratase.
  • Parser API: Extiende el analizador CSS pudiendo crear nuevas reglas, pseudo-clases, anidación @extends, @apply, etc. Una vez que el analizador conoce estas nuevas construcciones, puede colocarlas en el lugar correcto del CSSOM, en lugar de simplemente descartarlas.
  • Typed OM API: Todos hemos tenido que lidiar con la división de cadenas para eliminar el 'px' y así poder obtener un valor entero. Typed OM se encarga de todos estos valores con esta API basada en objetos para trabajar con valores CSS en JavaScript.
  • Font Metric API: Provee métodos para trabajar con fuentes que le brinda mucho más control sobre el texto en nuestra aplicación.
  • Properties and value API: Permite definir propiedades CSS y darles un tipo, comportamiento y valor predeterminado. Muy útil cuando se combina con otras APIs en esta colección.

houdini

¿Pero dónde esta el truco?

No todo van a ser buenas noticias pues existe un circunstancial “pero”. Actualmente se encuentra en en proceso de adaptación por parte de los navegadores, a pesar de que muchas ya están en un estado bastante avanzado. Para seguir dicha evolución, existe un proyecto donde poder ir siguiendo los avances.

houdini

Conclusiones

CSS Houdini nos brinda la posibilidad de depender únicamente de nuestras habilidades como desarrolladores, saltando la barrera que existe actualmente con el estándar de la W3C. Aunque todavía queda camino por recorrer para que sea compatible en todo su conjunto, es desde luego una gran noticia que en un futuro las limitaciones que hoy en día sufrimos formen parte del pasado.