CSSOM

CSSOM
Modelo de objetos CSS describe un mapa de todos los selectores CSSy propiedades para cada selector, es muy similar al DOM en HTML.
Ambos forman parte de la ruta, que es una serie de pasos que deben suceder para representar correctamente un sitio web .
en CSSOM también escucharás sobre heredar, el padre, el hijo
👨‍👦… esto es algo con lo que te debes de ir familiarizando, poco a poco.
imagen de la clase:

En el curso de Frontend hay una clase donde también se explican estos temas si quieren complementar: https://platzi.com/clases/1640-frontend-developer/21876-dom-cssom-render-tree-y-el-proceso-de-renderizado-/

Veanlo como que el DOM genera un árbol con todas las etiquetas HTML y el CSSOM le agrega los estilos a cada etiqueta. Algunos se los agrega por defecto el navegador y otros son escritos por el desarrollador (Aunque es posible quitar esos estilos por defecto).

CSSOM (CSS Object Model)

CSSOM genera algo similar al DOM, genera un árbol con los estilos.
Permite leer y modificar el estilo de CSS de forma dinámica.

CSS Object Model (CSSOM)

Mientras el navegador construía el DOM de nuestra página simple, encontró una etiqueta de vínculo en el encabezado del documento que hacía referencia a una hoja de estilo CSS externa: style.css. Previendo que necesita este recurso para representar la página, envía de inmediato una solicitud de este recurso, que regresa con el siguiente contenido:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Podríamos haber declarado nuestros estilos directamente en el lenguaje de marcado HTML (integrado), pero mantener la independencia de nuestro lenguaje de marcado CSS respecto del HTML nos permite abordar el contenido y el diseño como dos temas independientes: los diseñadores pueden trabajar en CSS, los programadores en HTML, etc.

Al igual que con HTML, debemos convertir las reglas de CSS recibidas en algo que el navegador comprenda y con lo que pueda trabajar. Por lo tanto, repetimos el proceso de HTML, pero para CSS en lugar de HTML:

Los bytes del CSS se convierten en caracteres, luego en tokens y nodos y, por último, se vinculan en una estructura de árbol conocida como “CSS Object Model” (CSSOM):

¿Por qué el CSSOM tiene una estructura de árbol? Al computar el conjunto final de estilos para cualquier objeto de la página, el navegador comienza por la regla aplicable más general para ese nodo (por ejemplo, si es un campo secundario del elemento body, se aplican todos los estilos de body) y luego define mejor y de manera recursiva los estilos computados aplicando reglas más específicas; es decir, las reglas se ordenan en cascada de forma “descendente”.

Para ser más concretos, considera el árbol del CSSOM anterior. El texto de la etiqueta span que se coloca en el elemento body tiene un tamaño de fuente de 16 píxeles y es de color rojo; el orden de tamaño de fuente se encuentra en una jerarquía de órdenes descendentes desde el elemento body hasta el elemento span. No obstante, si la etiqueta span es el elemento secundario de una etiqueta paragraph § no se mostrará su contenido.

Ten en cuenta también que el árbol anterior no es el árbol completo del CSSOM y en él solo se muestran los estilos que decidimos anular en nuestra hoja de estilos. Cada navegador proporciona un conjunto de estilos predeterminado, también conocidos como “estilos de usuario-agente”—lo que vemos cuando no proporcionamos los nuestros—y nuestros estilos simplemente anulan a los predeterminados (por ejemplo, estilos de IE predeterminados).

Para averiguar cuánto demora el procesamiento de CSS, puedes registrar una línea de tiempo en DevTools y buscar el evento “Recalculate Style”: a diferencia del análisis del DOM, la línea de tiempo no muestra una entrada “Parse CSS” independiente y, en su lugar, captura el análisis y la construcción del árbol del CSSOM, además del cálculo recursivo de los estilos computados en este evento.

Nuestras hojas de estilo simples demoran ~0,6ms en procesarse y afectan a 8 elementos de la página; no mucho, pero una vez más, no es gratis. Sin embargo, ¿de dónde vienen los 8 elementos? El CSSOM y el DOM son estructuras de datos independientes. Resulta que el navegador está escondiendo un paso importante. A continuación, hablaremos sobre el árbol de representación que vincula al DOM y el CSSOM.

Continuando con el tema anterior sobre el DOM, hablaremos sobre el CSSOM.
|
El CSSOM
es el árbol de nodos que indicará al navegador cómo se debe pintar el DOM (el contenido que tenemos para pintar) dadas las distintas reglas que tengamos de CSS.
|
¿Cómo se genera el árbol CSSOM?
El CSSOM se genera a partir del fichero con extensión .css y sigue exactamente los mismos pasos que el DOM para generarse:
|
🔹 Convertir los bytes a carácteres.
🔹 Pasar de carácteres a tokens.
🔹 Generar los nodos.
🔹 Construir el árbol CSSOM.
|
La construcción del DOM y del CSSOM se hacen de manera asíncrona/paralela. Eso significa que el proceso de generar el CSSOM no es bloqueante para poder generar el DOM pero, si que lo es para renderizarlo.
|
En caso de que el navegador detecte un <script> no declarado como asíncrono en el <head> de la página, éste será descargado pero no ejecutado hasta que el árbol CSSOM termine de ser construido y por tanto, si el Javascript no es ejecutado, la construcción del DOM queda bloqueada.
|

CSSOM obtiene el código CSS y convierte cada selector en una estructura de árbol para un análisis más fácil, es decir como el DOM para HTML.

El navegador descarga el HTML de la página web.
Al procesar el HTML, el analizador puede toparse con un elemento de enlace que hace referencia a una CSS externa .
Esta CSS se evalúa en un mapa usando las especificaciones del modelo de objetos CSS.
El código resultante se puede usar a elementos del DOM .

El CSSOM es importante entenderlo, porque a como se puede apreciar en el diagrama, a cada nodo del DOM se le agregan “nodos” que contienen reglas CSS, y a cada nodo del DOM podemos agregarle tantos “nodos” de reglas CSS como deseemos, y esto afectará en el rendimiento, pues CSS al estar organizando los nodos CSS y determinando a qué etiqueta del DOM están dirigidas deberá estar poniendo diferentes etiquetas al mismo nodo del DOM, por eso hay que ser cuidadosos con ello ^^

No sabía de la existencia del CSSOM. Por eso es bueno no subestimar los cursos teóricos, de hecho, ningún curso, porque de todos podemos sacar algo nuevo o recordar algunas cosas.

✨ CSSOM sigue el mismo modelo que DOM y está construido sobre la base de CSS.

20. Mis apuntes sobre: “CSSOM”

Una vez que se forma el primer árbol HTML, el servidor envía los archivos CSS y son integrados
al árbol.

Viene el segundo paso del Critical Rendering Path: el CSSOM

• Lo primero que había hecho el browser era ubicar el documento HTML y formar el DOM
• El DOM lo va leyendo de arriba hacia abajo, línea por línea, y lo va ejecutando.
• Llega en un punto en el que una etiqueta HTML hace referencia para “invocar” a otro archivo, que se trata de la hoja de estilos CSS, que se trata de un archivo donde está escrito todo el código CSS que va a definir la parte visual de los elementos HTML.

En la hoja de estilos CSS, se hace referencia a cada elemento HTML y se definen sus propiedades visuales: su color, su dimensión, su tipografía, su posición, etc.
.
Entonces el browser va formando un CSSOM (CSS Object Model), un árbol paralelo al DOM pero con CSS.
.
Son árboles paralelos pero complementarios, ya que el CSSOM hace referencia a los elementos del DOM. Y ambos se unirán en el siguiente paso del Critical Rendering Path, que lo vemos en la siguiente clase.

¿QUE ES EL CSSOM?

Así como el DOM para el HTML, el CSSOM es una representación de objetos de nuestros estilos en CSS.
El modelo de objetos CSS es un conjunto de API que permite la manipulación de CSS desde JavaScript. Es muy parecido al DOM, pero para CSS en lugar de HTML. Permite a los usuarios leer y modificar el estilo CSS de forma dinámica.

Justo en el momento que el navegador, lee la etiqueta link type="text\css" rel=stylesheet", pide una petición HTTP, para recibir el archivo de estilos y empezar a enlazar los elementos referenciados en ella.

La página de W3C que habla sobre el CSSOM. https://www.w3.org/TR/cssom-1/

Muy buena explicación.

no conocía estos detalles… y así se va armando poco a poco una pág. web

Esta clase se puedo haber unido con la anterior, es información muy similar.

Grande CSS

Hola chicos, les dejo este link donde pueden leer con más calma el tema del DOM y el CCSOM. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=es
Hay muchas guias que pueden ayudarlos a complementar estas y proximas clases. Exito a todos y a todas💪

CSSOM genera algo similar al DOM, pero con etiquetas CSS con los estilos

Y todo esto lo hace el navegador en milésimas de segundos!

Así como en el DOM existe el concepto de árbol de nodos, en CSSOM existe el concepto de modelo de caja (Box model).

CSSOM es un conjunto de APIs que permite manipular CSS desde JavaScript. Permite leer y modificar el estilo de CSS de forma dinámica. Dándole estilos y estética al contenido hecho en el DOM.

Primera vez que escucho este término. 😒

Nunca habia entendio con claridad el tema del DOM y del CSSOM, ahora si me queda muuuy claro

CSSOM
Una interfaz muy parecida al DOM, se crea un árbol con el orden o jerarquía de los estilos de la página, que luego llamaremos mediante el HTML.

Al final el DOM y CSSOM serán fusionados para mostrar el resultado final (la página o sitio web).

Diego explica de maravilla hasta ahora e entendido todos los contenidos

CSSOM

• CSS Object Model
• Es un árbol con todos los estilos relacionados al html
• Cuando el navegador encuentra en el html los estilos, realiza una petición al servidor de los mismos

CSSOM
Se encarga de tratar todos los estilos, genera otro árbol pero con todos los estilos ligados a los elementos que pertenecen.

CSS Object Model

El Modelo de objetos CSS (CSS Object Model) es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.

API(web o página XML) = DOM + CSSOM + JS(lenguaje de script)

Super!

Jamás me había quedado muy bien claro cual es el DOM, pero no es difícil de entender

Creo entender que el CSSOM se forma en base al DOM, se vinculan los estilos creados en el CSS con los nodos a los que se les aplicó estilos.

Con esta imagen lo entendí mucho mejor

CSSOM el árbol que se genera para leer la hoja de estilos del documento

gracias por la clase!

CSSOM: Css Object Model
es muy similar al DOM pero este se encarga de tratar todos los estilos, todo lo que viene adentro del documento de CSS

Es decir que se generan 2 árboles, uno para todas las etiquetas HTML y otro para cada elemento del CSS y se relacionan sus nodos.

CSSOM (CSS Object Model)

Se encarga de trata los estilos que van dentro del documento CSS

• Es otro árbol pero con todos los estilos ligados a los elementos que pertenece
• DOM+CSS (referencia de los estilos)= (CSSOM) árbol independiente, que se lee de arriba abajo
• La petición de estilos al servidor a través de http, este lo regresa y se empieza a formar

Estos son los pasos que el navegador debe hacer para renderizar un proyecto

CSSOM es casi lo mismo que el DOM es solo que trabaja sobre los estilos.

Claramente, se aplica todo el concepto de herencia y se mantiene ese estilo en forma de cascada.

Todos los estilos están ligados a los elementos a los que les pertenecen

Este es el encargo de poner los estilos y la estructura estética del sitio, también es un arbol de nodos como lo es el DOM (son parecidos los dos)

CSSOM: CSS Objecto Model.

Se pone cada vez mas interesante. Genial

CSSOM es muy similar sl DOM solo que con los estilos pero el arbolo y estructuras son similares

👌

osea que la pagina se lee por secciones…

Hasta ahora escucho las siglas CSSOM, excelente !

y eso lo hace en milisegundos

CSSOM
Modelo de objetos CSS con los estilos del sitio web y ligados a los elementos que pertenece

Thanks.

Gracias!

CSSOM es un árbol de estilo y DOM un árbol estructural.

En esta última sección del curso vamos a ver el proceso y los pasos que el navegador tiene que hacer para renderizar un proyecto, y con ello hacer una petición y obtener una respuesta del servidor. Esto es lo que sucede para que nosotros podamos acceder al contenido de un sitio web.

CSSOM CSS Object Model

tratamiento de estilos

genial

El CSSOM (CSS Object Model) Es similar al DOM, pero este utiliza todos los estilos ligados a los elementos de nuestro proyecto.

Es como el DOM pero en vez del documento de html, es del css. Un árbol de todos los selectores css y propiedades de cada selector.

CSSOM/CSS object model: Busca y jerarquiza los estilos CSS

El CSSOM es dónde el CSS se “pega” a los elementos del DOM y es importante saber como el navegador traduce el código en imágenes para optimizar nuestros diseños y aplicaciones (performance o rendimiento de la app)