¿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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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:
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:
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.
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.
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
