Aprende que es el CSSOM en 5 minutos

El CSSOM o CSS Object Model (Modelo de objetos de CSS) es un conjunto de APIs que permite la manipulación de CSS a través de Javascript.

Para los conocedores de Front-End el término puede que les suene conocido y si no al menos les sonará parecido a otro muy famoso: el DOM.

En pocas palabras, el DOM sirve para cambiar programáticamente el HTML con ayuda de Javascript. Por lo mismo te será fácil intuir que el CSSOM permite hacer lo mismo para el CSS.

*No obstante el DOM tiene mas características que vale la pena concoer. Así que si te interesa lee: aprender del DOM.

De igual manera el CSSOM cuenta con una especificación que esta definidad por la W3C (World Wide Web Consortium). Esta es la organización encargada definir los estándares a seguir de la web.

El árbol del CSSOM

Al parsear un archivo de CSS se crea un árbol con los nodos que se hayan identificado dentro del archivo. Este árbol también se le llama AST (Abstract Syntax Tree), que significa Árbol de Sintaxis Abstracta.

*Un AST no se genera solamente para el CSSOM. También es parte del proceso estándar generar uno para el DOM,

Pero para entender bien la lógica que se sigue para crear ese árbol debemos tener muy claro cómo trabaja CSS en primer lugar.

CSS “hereda” las propiedades de los elementos padres a los elementos hijos. De manera que algunos de estos valores se asignan automáticamente a los elementos anidados, a menos que se haya definido un valor literal por el autor del CSS (osea el desarrollador).

Probablemente te hayas dado de este comportamiento cuenta en algunas ocasiones. Al definir ciertas propiedades como el color o la fuente de un texto en un elemento padre de HTML se propaga ese efeceto a algunos de sus hijos.

Veamos un ejemplo simple. Supongamos que tenemos este archivo de HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="simple.css">
        <title>Index.html</title>
    </head>
    <body>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada dapibus eros, sollicitudin varius nibh fermentum nec. Nullam purus risus, dictum ac dapibus et, egestas eu lectus. Vestibulum vitae tristique augue. Aenean blandit lorem non ipsum interdum egestas. Integer ligula nibh, lobortis suscipit pellentesque ac, molestie ac arcu. Mauris euismod felis sit amet neque mollis blandit quis sit amet tortor. Cras lacus odio, ultricies in orci et, placerat placerat lorem. Etiam semper ultrices augue, eget ornare mi hendrerit in. <span>Praesent dui massa, fermentum ut metus id, posuere ullamcorper urna.</span> In ullamcorper lacus vitae nulla vestibulum, a dictum augue laoreet. Ut volutpat metus sed luctus ultricies. Nulla molestie pulvinar urna. Donec eu scelerisque diam. Aenean nec arcu risus. Nam sapien neque, egestas eget tortor vel, luctus gravida nulla.</p>
        <p>Sed nec fermentum orci, vel commodo nibh. Nulla laoreet interdum sodales. Integer ultrices enim in feugiat accumsan. Praesent quis ante ac massa congue sodales ut a nisi. Quisque condimentum leo ipsum, ut dictum diam feugiat et. Duis euismod, turpis ut sodales maximus, sem ante consectetur neque, ut sollicitudin ex dolor sed ex. Donec dui ligula, varius nec sagittis accumsan, efficitur pretium massa. Mauris ac enim est. Praesent vitae rhoncus erat, eu auctor sem. Nullam facilisis finibus ipsum vel consectetur. Fusce ornare venenatis cursus. Nam pharetra tempus purus, ac consectetur magna interdum in. Nullam vitae finibus libero. Etiam eros orci, pulvinar hendrerit leo ut, pretium volutpat leo. Donec vel risus ante.</p>
        <p>Nam varius lectus ac leo ultrices pretium. Cras id pellentesque eros, at rhoncus erat. Duis ultricies suscipit turpis in sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam rhoncus arcu velit, ut consectetur dui faucibus non. Phasellus ut eros at tortor egestas bibendum semper id sapien. Quisque fringilla, nibh et eleifend scelerisque, elit velit pulvinar ante, eu fringilla elit metus a mi. Aenean sollicitudin mi dui, non mattis dolor dictum sit amet. Etiam imperdiet consectetur consequat. <span>Cras suscipit nunc sed urna dictum facilisis. Sed blandit luctus sem in mollis.</span> Integer aliquam lacinia urna quis malesuada. In dapibus sapien id orci sagittis, non porttitor neque maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc tempus est ac lorem finibus scelerisque.</p>
    </body>
</html>

Y que este es el archivo de CSS asociado al mismo:

h1 {
    font-style: italic;
    color: blue;
}


p {
    color: darkgray;
    max-width: 50%;
}

El AST (Abstract Syntax Tree) para el CSSOM podría representarse de esta manera:

Nota como los 2 nodos que corresponden a h1 y a p son hijos del nodo body y este a su vez del nodo html. ¿Por qué?

Precisamente por la herencia de CSS.

html y body son los elementos en HTML que contienen a todos los demás y por ende todas sus propiedades se heredán a los elementos hijos.

*Es importante recordar que no todas las propiedades son heredables a todos los elementos. Cada una tiene sus particularidades y restricciones.

Aunque en este caso no definimos nada para html no body, por lo tanto no se hereda nada y nuestro h1 y p quedan justo como lo definimos en nuestro CSS…¿cierto?

¡Error! Por un lado en efecto no estamos heredando nada, pero eso no quiere decir que no haya otras propiedades aparte de las que definimos.

El diagrama anterior es engañoso. No muestra la realidad completa de lo qué esta pasando.

Tanto como body y html si tienen en realidad otras propiedades. Las propiedades que el navegador le agrego por defecto:

*Nota que en la imagen esta la leyenda de User-Agent. Este simplemente es el nombre que se la da al programa que esta parseando estos datos. En este caso el User-Agent sería el navegador: Chrome, Firefox, Edge, etc. ¿Quiéres saber más? Aprende que es un User-Agent en 5 minutos

Estas propiedades son las que se heredan como tal a los nodos hijos. Pero solo si forman parte de la lista de propiedades heredadas. Para revisar la lista completa puedes ver la tabla de referencia de W3C.

En este caso ni display ni margin son propiedades heredables. Así que por ese lado nos quedamos igual con h1 y p. Pero…¿acaso html y body son los únicos elementos a los que el User-Agent les agrega valores por defecto? Como seguramente ya te lo imaginaste, la respuesta es no:

Por lo tanto realmente los elementos que tiene cada nodo del AST del CSSOM se hacen teniendo en cuenta todos estos estilos.

Los elementos html y body quedan con los valores definidos en la hoja de estilos del User-Agent:

Los valores por del User-Agent junto con los valores definidos en nuestro CSS se juntan para definir los estilos de h1:

Los valores por del User-Agent junto con los valores definidos en nuestro CSS se juntan para definir los estilos de p:

*El AST no contiene la información por separado descrita en los recuadros de User Agent – Valores por Defecto o Valores Heredados. Estos solo se agregan para hacer más fácil visualizar de donde vienen los valores.

Por lo tanto la versión final de nuestro AST es la siguiente:

Ya que nuestro CSS fue bastante pequeño, en este caso el AST es bastante simple. De hecho la mayoría de los estilos no son nuestros y son los valores por defecto del User-Agent.

Pero…¡Felicidades! ¡Ya sabes que es el CSSOM!


Deja tu Respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *