TYPED OM

En el mundo globalizado en el que nos encontramos, la gestión de los datos siempre ha sido una problemática a la que tratar con mimo, ya que aunque el conocimiento es poder no siempre somos capaces de aprovecharlo si no se establece una buena gestión. De hecho, el eslogan que creo la agencia de publicidad Young & Rubicam en 1995 podría servirnos de preámbulo para afrontar este tema, “La potencia sin control no sirve de nada”.

Si trasladamos este punto a la web, y más concretamente a la manipulación de estilos CSS por medio de Javacript, nos aporta una autonomía para hacer lo que queramos y cuando queramos por medio del CSSOM. Probablemente no estéis familiarizados con el nombre, pero si en como se hace:

 

Sin embargo, todo gran poder conlleva una gran responsabilidad. CSSOM a pesar de sus grandes posibilidades, tiene como contra un desorden que en ciertas situaciones puede convertirse en algo ilegible nuestro código. En la siguiente imagen os muestro una de esas situaciones, donde el objetivo simplemente es obtener un color con una luminosidad calculada por medio del método “hsl()”. Pero si os fijáis, nos devuelve un color con el método css “rgb()”.

 

 

CSSOM tiene una especificación que describe como maneja los valores que se le pasan, convirtiendo cualquier formato de color a “rgb()” o “rgba()”.

 

“Si es un componente de un valor resuelto o calculado, devuelva el color usando la notación funcional rgb () o rgba () de la siguiente manera“

Esto ultimo complica un poco el uso de algunas herramientas que CSS nos aporta. Aunque existen formas para evitar esta traspilación. Existen hacks para evitar este tipo de situaciones, es utilizando variables CSS en lugar de uno de los parámetros, de esta forma evitamos que el motor de renderizado CSS lo analice, aunque más que una solución es en realidad un parche.

 

 

 

CSS Typed OM

 

La solución viene de la mano de Typed OM, la tercera API de la serie CSS Houdini, la cual nos facilita una serie de tipos, métodos y un modelo de objeto adecuado a los valores CSS que nos facilita la manipulación de datos, en lugar de cadenas. Los valores se exponen como objetos de JavaScript para facilitar la manipulación eficaz (y sensata) de CSS.

 

La nueva forma de acceder a los estilos es a través de un Map, un objeto similar al llamado en attributeStylesMap en lugar de solo style. Al igual que Maps, tiene todos los métodos habituales: get,set, has, etc. También es un iterador, por lo que podemos iterarlo por medio de un bucle “for …of”.

 

 

 

Actualmente Typed OM es compatible con la mayoría de los navegadores, con la salvedad de Firefox y safari. En el siguiente enlace podréis seguir el avance de todas las APIs de CSS Houdini.