Hey, this article is part of a series on rendering in the browser. If you haven't read the previous articles yet, check out the links below:
In the last article, we explored how HTML is processed by the browser through the DOM (Document Object Model), which defines the structure of the web page. However, a web page is not just made of HTML and something that many still don't know is that CSS also has its own representation in the form of an object, called CSSOM (CSS Object Model).
The browser uses CSSOM in conjunction with the DOM to build the page, combining structure (HTML) and styles (CSS), resulting in a harmonious visual presentation.
In this article, we will deepen our knowledge about CSSOM, understanding its structure, importance and how it can be manipulated.
Like the DOM, the CSSOM is a hierarchical data structure, but its function is to represent the CSS of a web document.
CSSOM is generated by browsers after style files are loaded and processed. Although it is built separately from the DOM, both work together so that the browser can assemble the page with the correct structure (DOM) and apply the appropriate styles (CSSOM).
The main function of CSSOM is to provide the browser with a detailed "map" of the styles that should be applied to each element on the page.
See a visual representation of the CSSOM below:
In the code, this representation would look like this:
body {
font-size: 16px;
}
div {
width: 200px;
height: 100px;
background: blue;
}
a {
color: red;
text-decoration: none;
}
h1 {
font-weight: bold;
}
And the DOM tree referring to the CSSOM that we saw previously is represented as follows:
Browsers provide us with a set of APIs that allow us to manipulate CSS using javascript. It is similar to the DOM API, but for CSS instead of HTML.
Using this API we can read and manipulate the CSS of a page dynamically.
The simplest way to manipulate styles is through the style property present in the document.
To access and manipulate a CSSOM element for the first time, open the browser console and run the following code:
document.body.style.background = "gray"; console.log(document.body.style.background); // gray
After executing the code snippet above, I recommend that you inspect the page elements and analyze the body. Note that now our body has an inline style and will look more or less like this:
body {
font-size: 16px;
}
div {
width: 200px;
height: 100px;
background: blue;
}
a {
color: red;
text-decoration: none;
}
h1 {
font-weight: bold;
}
We can add or change any CSS property on our page, always following the pattern element.style.propertyname.
Another way to manipulate inline styles is through some methods present in the style.
document.body.style.background = "gray"; console.log(document.body.style.background); // gray
<body> <p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br> A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br> </p> <pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''
document.body.style.setProperty("background", "red");
// Agora execute o próximo comando
document.body.style.setProperty("background", "blue");
getComputedStyle works for read only. You will be able to access the style information for any element or pseudo-element, but you will not be able to make changes.
Writing inline styles is not very common, so we can also access computed styles, the ones we define in our stylesheet. To do this, we can directly access and manipulate our style sheet.
Run the code snippet below in your browser console:
document.body.style.getPropertyValue("background"); // blue
With it you will have access to all style sheets declared in the head of your html.
These stylesheets are returned in list format (it looks like an array, but it is not) and you can access it through the index.
document.body.style.removeProperty("background");
From now on I recommend running the tests elsewhere, as this blog is made with Tailwind CSS and manipulating the stylesheet becomes more complicated.
Access this page and execute the commands in its console.
document.styleSheets;
By executing the code above you will have access to all the css present in the style sheet. Following the same logic as above, you can access elements through index.
document.styleSheets[1];
In the code above I am accessing the page body style declaration.
document.styleSheets[0].cssRules;
By accessing the style property we can add or change any CSS property, but without writing inline styles.
I recommend that you play a little more with this api by changing the indexes and changing the CSS of different elements.
Just like the DOM, the CSSOM is a tree-shaped representation used by browsers for the rendering process.
We can access all of the page's CSS and manipulate it freely using javascript. Knowing how to perform this type of operation is essential to understand CSS tools such as styled components, linears, etc.
Basic knowledge is the most important, but it is constantly neglected.
In the context of web development, knowing HTML, CSS, JavaScript and how the browser works is essential. With this solid foundation, you will be able to learn any technology that derives from these fundamentals.
Thank you for getting here!
I hope you learned something new throughout this reading.
See you next time!
CSS Object Model
Constructing the Object Model
CSSOM — CSS Object Model
An Introduction and Guide to the CSS Object Model (CSSOM)
The above is the detailed content of Understanding rendering in the browser: CSSOM. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
