Clase 28 - CSSOM
Repaso de la clase
驴Qu茅 significan las siglas?
- CSS Object Model.
驴Qu茅 es el CSSOM?
- Es un 谩rbol de nodos que crea el navegador a partir del DOM para entender los archivos CSS del sitio web.
Historia de las computadoras
驴C贸mo desarrollar para la web?
El lenguaje de la computadora
Historia de la computaci贸n
驴Qui茅nes eran las computadoras?
Inputs y Outputs
Binario
Bits y Bytes
ASCII
UNICODE
RGB
C贸mo funciona el internet
驴De donde viene el internet?
Internet internacional
Protocolos
Paso a paso de c贸mo funciona los protocolos
ISP
DNS
Historia de la Web
El primer desarrollador Web
Web Browser
W3C
Evoluci贸n del protocolo HTTP
HTTPS
Estandar茅s Web: navegadores
Estandar茅s Web: HTML, CSS y Javascript
Web Assembly
La Web moderna: 驴d贸nde estamos ahora?
La web moderna: internet of things, machine learning e inteligencia artificial
C贸mo funciona el navegador
驴C贸mo funciona el navegador?
DOM
CSSOM
Render Tree
Layout
Paint
JS Engine
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What is CSSOM?
In the world of web development, understanding the process behind how browsers render our pages is crucial. One of the vital components in this process is the CSSOM, or CSS Object Model. The CSSOM is the model that the browser creates by reading and interpreting your project's CSS file, responsible for all the styles visible on the page. This model acts in conjunction with the DOM (Document Object Model) to give visual form to the HTML structure.
How does CSSOM work?
The CSSOM follows a precise process that occurs almost simultaneously with the creation of the DOM. When the browser loads a web page, it follows these steps:
-
HTML interpretation: The browser first reads the HTML document, constructing the DOM with nodes representing each HTML tag. These nodes dictate the structure and content of the document.
-
CSS request: Once the HTML is largely processed, the browser detects references to the CSS in the
<head>section of the document. It requests those CSS files, starting the style interpretation process. -
Creation of the CSSOM: With the CSS in its possession, the browser begins to build the CSSOM. Each CSS rule is evaluated to determine which DOM elements it applies to. For example:
p { color: blue;}Here, the browser checks all
<p>tags in the DOM and associates that specific color with each relevant paragraph node. -
Mapping and association: During model building, CSS styles are mapped to the appropriate nodes in the DOM. If a node in the DOM has no specific styles in the CSS, it simply remains unchanged in the CSSOM.
What results from this process?
The end result of the process is a CSSOM tree that is fully aligned with the DOM. Each node in the DOM has a corresponding set of styles in the CSSOM tree. However, it is important to note that, up to this point, the DOM and CSSOM operate independently, they have not yet "merged". This merging is a crucial step that occurs later in the rendering of the page.
Why is it important to understand CSSOM?
Having a thorough understanding of CSSOM helps you understand how browsers handle styles and optimize your code to improve performance. By understanding this model, you can:
- Reduce render load time by optimizing the size and structure of your CSS.
- Diagnose display problems by identifying how styles are applied to specific DOM elements.
- Improve the efficiency of your applications by making informed adjustments to your CSS to improve responsiveness and user experience.
CSSOM is, in short, a fundamental part of your CSS journey from your code to what you see on screen - mastering it will allow you to create more efficient and visually stunning pages!
Contributions 6
Questions 2
Sort by:
驴C贸mo queda el CSSOM si en nuestro archivo .css no estamos aplicando estilos directamente mediante los selectores de las etiquetas sino a trav茅s de clases?
Por ejemplo, en vez de hacer algo como:
body {
font-size: 16px;
}
Hacer algo como:
.special {
font-size: 16px;
}
En estos casos 驴c贸mo queda el CSSOM? 馃.
Es emocionante aprender mucho acerca de las estructuras de nuestra carrera y que no lo explican en la universidad. Al final todo depende de cada uno investagar la funcionalidad y el significado de este. Jamas pense que CSSOM sea lo mismo que DOM con la diferencia que el primero es la rama de los estilos de los nodos de DOM.
Un nodo es un elemento dentro de una estructura de datos, como un 谩rbol. En el contexto del DOM (Document Object Model), cada etiqueta HTML en un documento se considera un nodo. Estos nodos son parte de la estructura jer谩rquica que el navegador utiliza para representar la p谩gina web. En el CSSOM (CSS Object Model), los nodos tambi茅n se relacionan con los estilos aplicados a las etiquetas HTML, donde cada nodo puede tener propiedades de estilo asociadas.
As铆 como el DOM, es el arbol estructrural de la p谩gina, el CSSOM, llega ser el conjunto de tipos que escanea en la pagina a trabajar.
El DOM (Document Object Model) y CSSOM (CSS Object Model) son dos representaciones estructurales diferentes en un navegador.
- **DOM**: Representa la estructura del documento HTML, permitiendo a los scripts interactuar y manipular el contenido y la estructura de la p谩gina.
- **CSSOM**: Representa las hojas de estilo CSS aplicadas a los elementos del DOM, permitiendo que el navegador entienda c贸mo se deben aplicar los estilos a cada elemento.
Ambos modelos se generan de manera similar, pero sirven para prop贸sitos distintos en la renderizaci贸n de una p谩gina web.
Want to see more contributions, questions and answers from the community?