Understanding rendering in the browser: CSSOM-JS Tutorial-php.cn

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:

Understanding rendering in the browser: DOM

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.

What is CSSOM?

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:

Entendendo renderização no browser: CSSOM

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;
}

Copy after login

And the DOM tree referring to the CSSOM that we saw previously is represented as follows:

Entendendo renderização no browser: CSSOM

Manipulating CSSOM

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

Copy after login

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;
}

Copy after login

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.

setProperty: with this method you can add or change the value of an inline property.

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Copy after login

getPropertyValue: with this method you can access the value of an inline property.

<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); // '''

Copy after login

removeProperty: with this method you can remove an inline property.

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

Copy after login

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.

What about styles that are not inline?

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

Copy after login

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");

Copy after login

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;

Copy after login

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];

Copy after login

In the code above I am accessing the page body style declaration.

document.styleSheets[0].cssRules;

Copy after login

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.

Conclusion

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 very much!!

Thank you for getting here!

I hope you learned something new throughout this reading.

See you next time!

References

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!