CSS Houdini. Preludio en Es 30.1.18
Preguntas y respuestas básicas a qué es CSS Houdini y sus promesa de liberar CSS de su "dependencia del navegador"
CSS Houdini. Preludio en Es
Cualquier desarrollo o novedad en CSS siempre se ha encontrado con un ligero problemilla para que su uso se extienda y generalice: su desarrollo e inclusión (soporte) en el core del navegador. De todos o al menos de los principales por cuota de mercado.
Y que eso ocurra supone en casi todas las novedades largos tiempos de desarrollo y espera. En el mejor de los casos. Que hay muchas novedades que mueren en el camino.
¿Qué es CSS Houdini?
Houdini es la vía que propone el W3c para liberar de la dependencia (soporte) que tiene CSS del navegador utilizado por el usuario. Esto es, poder usar las novedades CSS con independencia de que el navegador las soporte o no.
¿Cómo lo quiere lograr?
En palabras del propio grupo de trabajo del W3c que está tras Houdini:
The Houdini task force consists...
to expose certain parts of the CSS engine to web developers.
Lo que pretende el grupo de desarrollo de Houdini es exponer (hacer accesibles) al desarrollador web ciertas partes del motor de CSS del navegador para que así pueda utilizar CSS sin el peligro que supone que el navedador del visitante no lo soporte.
¿Quién está tras el desarrollo de Houdini?
Inicialmente ingenieros de Mozilla, Apple, Opera, Microsoft, HP, Intel y Google.
¿Qué está hoy en desarrolo en Houdini?
Como es lógico, Houdini no pretende abarcar todo el corpus de CSS. De momento su desarrollo se centra en las siguientes API´s:
- Box Tree API 1. Editor: dbaron
- CSS Layout API 1. Editor: florian
- CSS Painting API 1. Editor: tabatkins
- CSS Parser API 1. Editor: dbaron
- CSS Properties and Values API 1. Editor: tabatkins
- CSS Typed OM 1. Editor: tabatkins
- Font Metrics API 1. Editor: dbaron
- Worklets 1. Editor: dbaron
¿Dónde encuentro la documentación "oficial" de Houdini?
Los documentos más significativos sobre Houdini son:
- Worklets Level 1
Editor’s Draft, 9 November 2017 - Worklets Level 1
W3C First Public Working Draft, 07 June 2016 - CSS-TAG Houdini Editor Drafts
Listado de las API´s de Houdini con enlaces a cada documento que las desarrolla.
¿Cuál es el estado (soporte) a Houdini?
Para que Houdini deje de ser una promesa y devenga en realidad volvemos a que precisa que sea implementado en los navegadores. Cuestión que hoy por hoy aún deja mucho que desear.
Surma, aka @DasSurma en Twitter, ha creado la página Is Houdini ready yet‽ en la que de un vistazo puedes ver el estado actual de las distintas API´s de Houdini. Con el extra de los distintos enlaces que incluye.
¿Hay ejemplos de lo que puede hacerse con Houdini?
Sí. De un tiempo a esta parte hay desarrolladores que están experimentando con Houdini y creando demos de lo que hace/hará posible.
Posíblemente a quién más se está mentando últimamente es a Vincent De Oliveira, aka @iamvdo, y sus CSS Houdini Experiments. En la imagen adjunta puedes ver un listado de los que tiene publicados en este momento.
También en Codepen, como cabría esperar, puedes encontrar autores, cada día más, que están experimentando con las posibilidades de Houdini.
¿Dónde encuentro información más detallada?
Este artículo como habrás visto es, como reza su título, sólo un preludio o introducción a CSS Houdini. Superficial y nada técnico.
Si ha despertado tu curiosidad y quieres ampliar tus conocimientos sobre Houdini ya hay la suficiente literatura como para que pases un buen rato. Entre los que creo más significativos tienes los siguientes:
- Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of
Todo un clásico, Mayo de 2016, por Philip Walton en smashingmagazine.com - Houdini: Demystifying CSS
Por Surma en developers.google.com - A Houdini Quickstart: registerProperty.
Artículo de Daniel C. Wilson en el que detalla el uso de Houdini vía el método javascriptCSS.registerProperty()
en el contexto de lasCSS custom properties
.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso