The CSSOM or CSS Object Model is a collection of methods and properties you can use in the browser to interact with DOM Styles.
Before jumping into CSSOM, we first have to establish an understanding of how a browser renders a website.
The components that make up a browser
| Bindings |
|---|
| Rendering: Parsing, layout, painting, etc |
| Platform - - - - - - JavaScript VM |
- Bindings talk to the network, handle API calls
- Rendering constructs the webpage from the HTML
- Platform handles form controls, dependent on OS
- JavaScript VM handles interaction
CSSOM lives inside the rendering component
The flow of rendering after the browser receives HTML and CSS files is as follows:
- One process parses HTML
- One process parses CSS
- This is combined into the render/frame tree (data structure)
- The tree is passed onto the layout.
- Finally, the layout is painted onto the browser.
HTML is forgiving by nature. It's not strict and can imply closing tags, head, structure.
For example given the following badly written HTML:
<div>
<p> Hello There
<div><button>Click Me</button>
The parser can imply the following structure:
<html>
<head></head>
<body>
<div>
<p> Hello There </p>
<div>
<button> Click Me </button>
</div>
</div>
</body>
</html>
Representation of the HTML, which is turned into the DOM tree.
When the parser reaches an element like <script>, <link>, <style> it halts to fetch it. Then it executes script. Link and style are similar.
The parser will look ahead for link and style elements while its paused during a process.
The parsing process can start over again if, for example, it encounters a js file that alters the DOM in some way.
For example:
document.body.appendChild(document.createElement('h5'))
This would interrupt the parsing process, slowing it down. This is why script tags should live at the bottom of the html. An alternative is to defer the script to be executed later.
MDN defines the CSS Object Model as "a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically."
When the browser parses the CSS it creates the CSSOM, which creates a representation of the styles, rules, and declarations.
image sourced from html5 rocks
CSSOM/DOM moves into the render/frame tree combined. This tree is the actual representation of what will show on screen. However, this is not a 1 to 1 mapping of the HTML because non-visual elements aren't passed through. For example, elements with display: none.
A simple way to manipulate CSS properties and values using JS is by using the style object.
document.querySelector("p").style.marginLeft = "1px"
This is fairly straightforward, but is limited to inline styles. In other words, you can't access styles that haven't been explicitly defined.
console.log(document.body.style.color) // returns undefined
An alternative to reading CSS attributes is the window.getComputedStyle(HTMLElement), which returns an object of all computed CSS styles. You can access specific properties using keys like this: window.getComputedStyle(HTMLElement)['background-color']
A preferable alternative to setting / removing styles from an element using CSSOM is using the setProperty and removeProperty methods. For example:
const button = document.querySelector("button")
button.setProperty("background-color", "red")
button.removeProperty("background-color")
A more complex and systematic way of altering CSS stylesheets and style elements is through adding and removing CSS rules. To see a live example of this, navigate to the demo folder.
The explanation / overview portion of this repo draws heavily from Ryan Seddon's talk "So how does the browser actually render a website". Other info was gathered from MDN and HTML5Rocks.