A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

CSSOM

20/25
Recursos

Aportes 66

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥淐SS 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 鈥渄escendente鈥.

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 鈥渆stilos de usuario-agente鈥濃攍o que vemos cuando no proporcionamos los nuestros鈥攜 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 鈥淩ecalculate Style鈥: a diferencia del an谩lisis del DOM, la l铆nea de tiempo no muestra una entrada 鈥淧arse 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 鈥渘odos鈥 que contienen reglas CSS, y a cada nodo del DOM podemos agregarle tantos 鈥渘odos鈥 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: 鈥淐SSOM鈥

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 鈥渋nvocar鈥 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 鈥減ega鈥 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)