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
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.
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.
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.
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:
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
驴Qu茅 significan las siglas?
驴Qu茅 es 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.
Want to see more contributions, questions and answers from the community?