¿Qué es y cómo funciona CSS Houdini?

La llegada de CSS Houdini ha revolucionado el desarrollo web. Nacido de una colaboración entre ingenieros de las grandes compañías tecnológicas, ha supuesto un cambio descomunal del diseño de las hojas de estilo, permitiendo a los programadores un mayor rango de control sobre ellas, contrariamente a las posibilidades que ofrecía la versión clásica de CSS. Por ello, desde KeepCoding, hemos decidido dedicar este webinar a esta novedosa versión que cambiará para siempre el futuro del desarrollo frontend.  Para explicarnos qué es Houdini y cómo funciona, hemos invitado a Joan León, Frontend Engineer en Adevinta Spain, Google Developer Expert en tecnología web y Media Developer Expert de Cloudinary. Además de definir las particularidades de CSS Houdini, nuestro ponente nos mostrará, con ejemplos, su puesta en práctica y los resultados obtenidos.

¿Qué es CSS Houdini?

Antes de explorar las características de CSS Houdini, hay que definir primero qué se entiende por CSS. Del inglés Cascading Style Sheets, se trata del lenguaje de programación que da forma al aspecto que va a tener un documento HTML o XML en el buscador; determinando, por ejemplo, tipografías, colores, formas, etc.  Hasta ahora, las posibilidades de estilo que ofrecía eran limitadas. Fue la necesidad de ampliar el potencial del CSS lo que motivó la creación de Houdini. Como indica su nombre, tomado del famoso mago estadounidense de principios del siglo XX, su objetivo es desvelar la magia que se esconde detrás de los navegadores para que los desarrolladores tengan un mayor control sobre el resultado de su trabajo.

¿Cómo funciona CSS Houdini?

Las novedades que aporta CSS Houdini son un conjunto de APIs, es decir, interfaces de programación de aplicaciones, que exponen la parte antes invisible de los procesos de estilización de las páginas web, permitiendo el acceso de los desarrolladores. Esto no solo ofrece una mayor libertad al programador para la definición de hojas de estilo, sino que además simplifica significativamente esta fase. De los rasgos más interesantes de este modelo, destaca el control que se tiene ahora sobre determinados worklets, que son los que permiten conectar con el motor de los navegadores. Con CSS Houdini, estos procesos tiene lugar de forma paralela y es el navegador el que pide cuántos necesita. Esto hace que todo el hilo se realice de forma más fluida, evitando los habituales bloqueos y optimizando los tiempos de trabajo. En definitiva, CSS Houdini ha transformado el proceso de desarrollo y ejecución de las hojas de estilo. Sin lugar a duda, su gran aportación ha sido el descubrimiento de la magia que se disimulaba detrás de navegadores, lo que ha dotado a los programadores de una mayor autoridad, mejorando todo el procedimiento y permitiendo un mejor aprovechamiento del tiempo. Por eso, te animamos a que visualices la demostración que hace nuestro ponente de las aportaciones de CSS Houdini en este webinar. En ella, detalla cada algunas de las principales mejoras en comparación con la versión anterior de CSS. Asimismo, si te llama la atención el futuro del front-end web development, te invitamos a que le eches un vistazo a nuestro Desarrollo Web Full Stack Bootcamp. 

¿Quieres seguir aprendiendo sobre Frontend? Domina por completo las herramientas y lenguajes para desarrollar frontend, backend, servidores e integrarlos con arquitecturas revolucionarias como los microservicios con nuestro Desarrollo Web Full Stack Bootcamp. Descubre cómo en menos de 8 meses podrás formarte desde cero y convertirte en un Full Stack Developer.