En los últimos años el desarrollo web ha entrado en una nueva dimensión a nivel de versatilidad y posibilidades, sobretodo gracias a la integración de funcionalidades que antes eran posibles solamente usando frameworks externos, pero que ahora son parte del motor de CSS.
Una de estas características es CSS Houdini, un grupo de APIs que te permite hacer magia. :)
¿Qué es CSS Houdini?
CSS Houdini es un conjunto de APIs de bajo nivel que exponen partes del motor de CSS, dándote el poder de extender CSS. CSS Houdini se conecta con los estilos y el proceso de diseño de un motor de renderizado de un navegador.
Por tanto, CSS Houdini es un grupo de APIs que da a los desarrolladores acceso directo al modelo de objetos de CSS (CSSOM). Esto permite a los desarrolladores escribir código que el navegador puede analizar como CSS, creando nuevas funciones de CSS sin esperar a que se implementen de forma nativa en los navegadores. ¿Cómo lo ves?
Ventajas de Houdini
Houdini te permite tener tiempos de análisis más rápidos que los proporcionados por la “tradicional” propiedad style de Javascript para cambios de estilo. El navegador analiza el CSSOM antes de aplicar las actualizaciones de estilo que se encuentran en los scripts.
Además, los procesos del modelo CSSOM — diseño, pintura y composición — se repiten para las actualizaciones de estilo de JavaScript. En este contexto, Houdini es interesante pues su código no espera que se complete el primer ciclo de renderizado. Se incluye en el primer ciclo, creando estilos renderizables y entendibles — con valores de CSS en JavaScript-, gracias a su API basada en objetos.
Entre estas y otras características, Houdini también te permite exponer valores como objetos de JavaScript o crear CSS modular. Esto te ayuda a importar componentes configurables con una sola línea de JavaScript.
Consideraciones a tener en cuenta con Houdini
Sin embargo, tanto “poder requiere la correspondiente responsabilidad”. Con Houdini puedes inventar lo que quieras, por ejemplo tus propias cuadrículas o sistema de cuadrículas. Pero debes reflexionar previamente si vale la pena hacerlo, o si es una buena idea.
Recuerda y considera el hecho de que se hacen muchos esfuerzos para garantizar que cada característica y función funcione con un buen rendimiento, considera todas las casuísticas, tiene en cuenta la privacidad, la seguridad, la accesibilidad, etc, etc…
Las APIs de Houdini
Houdini tiene diferentes APIs que merecen la pena echar un vistazo. Puedes leer más en el sitio web oficial de CSS Houdini, pero las siguientes son las APIs de Houdini más importantes que deberías conocer.
- API de analizador de CSS. Expone el analizador de CSS de forma más directa.
- API de propiedades y valores de CSS. Permiten registrar nuevas propiedades de CSS.
- CSS Typed OM. Expone los valores de CSS como objetos de JavaScript tipado.
- API de diseño de CSS. Permite escribir algoritmos de diseño propios, como masonry o salto de línea.
- API de pintura de CSS. Permite escribir funciones de JavaScript para dibujar directamente en el contenido de un elemento.
- Worklets. Similares a los Web Workers, y son llamados y extendidos por el motor de renderización.
Houdini.how
Houdini.how es un sitio web de Google y otros colaboradores con demostraciones, basadas en la API de pintura (Paint API), de lo que puede hacer Houdini. Visita Houdini.how si quieres tener, de forma rápida, una idea visual de lo que puedes hacer.
Conclusión
Para concluir, se necesita tiempo para que una nueva propiedad de CSS salga al mercado. Las APIs de Houdini te permitirán utilizar el código de JavaScript para manipular y decorar los estilos más cerca de la línea de procesamiento del navegador.
Esto significa mejor rendimiento y más estabilidad. Además, puedes desarrollar polyfills de CSS que pueden ser compartidos o incluso implementados en las especificaciones de CSS.
Houdini hará que tu o tus diseñadores os veais menos restringidos por las limitaciones cuando trabajéis en estilos, diseños y animaciones, pero ten en cuenta las consideraciones referidas en este artículo. ¡Crea cosas únicas que crees que deben estar en houdini.how!
¿Qué te parece CSS Houdini? Crees que tiene sentido para tu futuro proyecto? ¡Coméntalo abajo!
¡Feliz 2021!
Fuentes:
