<div>    <p>Hi, there!</p>    <button>        Change Text    </button></div>

Output:

<div>  <p>Hi, there!</p>  <button>    Change Text  </button></div>

After reading the HTML file and constructing the DOM, the browser collects all the CSS styles from all the existing sources and builds aCSSOM (Cascading Style Sheet Object Model).

CSSOM is a CSS representation of DOM. Each node in CSSOM contains the style that will be applied to that particular node in DOM that theCSS Selector is targeting.

First, a final CSS is generated by considering the specificity (overriding some styles if they are repeated); only then is the CSSOM created. CSSOM does not contain elements that are not printed on the screen.

Render Tree

In the third step, we combine the DOM and CSSOM to form a render tree. While creating the render tree, the browser checks every node from the root and determines the styles attached to it. Only the elements that are supposed to be present on the screen are added in the render tree nodes.

If there’s a node with a property display set as none, that node and its descendants are not added to the render tree. Similarly, the head section of the web page contains no visible information and hence is not included in the render tree.

Layout

The layout operation is responsible for calculating the position and dimensions of each node from the render tree. The layout is the process by which the width, height, and location of all nodes in the render tree are determined. In this step, the browser determines the width, height, location, and geometry of each node present in the render tree and creates a layout.

Layout operation is also calledbrowser reflow. This operation runs every single time the browser viewport is changed.

Through thisusability testingtutorial, you will learn how usability testing is a great way to discover unexpected bugs, find what is unnecessary or unused before going any further, and have unbiased opinions from an outsider.

Paint

Up until now, the browser has created layers of each element separately. In paint operation, the browser works on each layer and fills them with visual elements like borders, colors, backgrounds, fonts, shadows, etc.

This process is performed on each layer separately. Paint operation is also called rasterization.

Composition

In this step, we combine all the layers generated till now and draw them on the screen as a single web page. After the composition operation, the web page is displayed on the browser.

This sequence of events is called thecritical rendering path.

So let’s quickly summarise

• DOM is generated from the HTML code.

• CSSOM is created based on the stylesheets (Internal and External).

• DOM and CSSOM are combined to form the render tree.

• Layers are created based on the render tree in the layout operation.

• Visual factors are added to each layer in the paint operation.

• Layers are combined in the composition process and presented on the screen.

Once all the critical rendering path steps are completed, JavaScript attached to the code is loaded. However, there is a slight issue with the web page rendering that we typically face. In the next section of this blog, we will explore the issues with the rendering of a web page.

What’s the issue with the rendering of a web page?

As seen above, a developer has limited access to DOM and CSSOM. (The degree of access to CSSOM is unspecified in the official docs)

So if you ever have to write a polyfill for CSS, you cannot plug it into CSSOM directly since you don’t have access to it. You can only plug it inside the DOM.

This means you have to update the DOM, resulting in a re-rendering of the complete web page. The browser will reinitiate the rendering process whenever you make any DOM changes.

Re-rendering your website once or twice after you initially load it might sound like a small dent in your website performance. But consider a case where you have written a polyfill that will run every time you scroll. This will make your webpage load multiple times, significantly affecting performance.

For example, let’s say you created a CSS smooth scroll polyfill function that bringsCSS smooth scroll property in old browsers and Internet Explorer. This polyfill function runs every time the browser detects scroll. This makes the web page reload whenever the function is invoked, hence affecting the performance.

So we need to find a way to modify or extend the CSS without triggering the re-render. That means modifying the rendering cycle without touching the DOM.

Black Box testing? Don’t worry; we will be covering what is Black box testing, merits, demerits, types & techniques.

How does CSS Houdini handle web page rendering issues?

Houdini introduces a new set of APIs that lets the developers access the parts of the browser rendering pipeline. For the first time, you will have access to the layout, painting, and other processes of the website. Developers can go above the regular CSS styling and create their properties, layout, and animations.

This extension of the CSS engine is possible due to CSS Houdini APIs. CSS Houdini is a set of APIs that expose parts of the CSS engine.

CSS Houdini APIs

CSS Houdini consists of two sets of APIs.

1. Low-Level APIs

2. High-Level APIs

These APIs (low-level and high-level) make it easier for developers to create extensions for CSS. These extensions might be to polyfill features that are not yet available in a browser, experiment with new layout methods, or add creative borders or other effects.

These extensions act as polyfill to provide features that are not yet available in the browser. Using these APIs, developers extend the stages of the CSS rendering pipeline by adding custom JavaScript code and creating custom features like layouts, borders, backgrounds, etc.

Low-Level APIs

These APIs form the foundation of the High-level APIs.

1. Worklets

2. Typed Object Model API

3. Custom Properties API

4. Font Metrics API

High-Level APIs

These High-level APIs represent the four stages of the browser’s rendering pipeline.

1. Paint API

2. Layout API

3. Animation Worklet API

4. Parser API

As of November 2022, only paint API, custom properties API, and typed object model API is supported in Chromium-based browsers and will be available soon in Firefox and Safari. So only use these supported browsers to check the output of the explained examples.

Following is the browser support for Houdini APIs.

Source

A comprehensive UserAcceptance Testing(UAT) tutorial that covers what User Acceptance Testing is, its importance, benefits, and how to perform it with real-time examples.

Worklets

A worklet is a lightweight version of aweb worker and acts as anextension point of the browser rendering engine for the developers. Each worklet runs in a separate context and has no access to the window, document objects, or high-level functions.

Worklets run independently of the main thread and can be invoked at any point of the rendering pipeline. Worklets are the JavaScript modules that attach themselves to the browser and make the high-level APIs work. They are imported and registered using a single line of JavaScript.

Currently, CSS Houdini supports three worklets.

1. Paint Worklet

2. Layout Worklet

3. Animation Worklet

Importing a paint worklet:

CSS.paintWorklet.addModule("url-of-worklet");

Using an imported worklet:

    body{     background-color: paint(confetti)     }

Typed Object Model API

CSS values come with a variety of units. We havepx,rem,em,ch,cm, and more! Interacting with so many units is difficult for any developer. Currently, the only way for developers to read and modify CSS values using JavaScript is by parsing them into Strings. This makes it difficult to perform arithmetic operations, and code is more prone to errors.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Lambda Test</title></head><body>    <section>        <div>            <h1>Lambda Test</h1>        </div>    </section></body></html><script>    var heading = document.getElementById('heading')    console.log(heading.style.height)    console.log(typeof heading.style.height)</script>

Output:

As you can see in the above example, the 100px value is a string. So to add any value to it, we need first to parse it into an Integer, perform our operation, and convert it back to a String. This gets even tougher when the unit used is relative, like %, vh/vw.

Typed Object Model API adds moresemantics to the CSS by exposing them as JavaScript objects. Hence instead of taking a CSS value and parsing it into a String, Typed OM APIs provide you with aJavaScript Object withvalue andunit property. This approach is faster, and the code is more maintainable and less prone to errors.

Using computedStyleMap() we get an object which consists of the value and the unit. It is easier to perform the calculations and work with a numerical value.

Here is how we use Typed Object Model API.

    //select the container using javascriptvar elem = document.getElementById('container')console.log("Using Typed OM ")console.log("Height : " + elem.computedStyleMap().get("height"));console.log("Type of Height = " + typeof elem.computedStyleMap().get("height").value);

Output:

computedStyleMap() method is used for parsing computed properties and attributeStyleMap is used for parsing and modifying inline styles.

Typed Object Model API performs type checking. So if you pass a wrong data type, it will show an error in the console.

Here’s an example showing how easy it is to interact with CSS properties using the Typed Object Model API.

HTML:

<body>    <div>        <h1>Typed OM using CSS Houdini</h1>        <p>Open the console log</p>    </div></body>

CSS:

body {    background-color: #fefefe;    display: flex;    justify-content: center;    align-items: center;}h1 {    font-family: 'Courier New', Courier, monospace;    font-size: 30px;}div {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    height: 400px;    width: 800px;}

#"container");elem.style.height = 500;console.log(typeof elem.style.height);//String//getting styles using Typed OMconsole.log(elem.computedStyleMap().get("height"));console.log(elem.computedStyleMap().get("height").value);console.log(typeof elem.computedStyleMap().get("height").value);console.log(elem.computedStyleMap().get("height").unit);//setting styles using Typed OMvar elemTwo = document.getElementById("heading");elemTwo.attributeStyleMap.set("font-size", CSS.px(50));//getting inline-stylesconsole.log(elemTwo.attributeStyleMap.get("font-size"));//an error will be thrown if we pass a non string value//elemTwo.attributeStyleMap.set('font-size', CSS.px(asd))//Clear all the stylesconsole.log(elemTwo.attributeStyleMap.clear);//delete font-size styleconsole.log(elemTwo.attributeStyleMap.delete("font-size"));//check if style is presentconsole.log(elemTwo.attributeStyleMap.has("font-size"));

<div>        <h1>Typed OM using CSS Houdini</h1>  <p>Open the console log</p>    </div>

  //Clear all the styles  console.log(elemTwo.attributeStyleMap.clear)  //delete font-size style      console.log(elemTwo.attributeStyleMap.delete('font-size'))  //check if style is present          console.log(elemTwo.attributeStyleMap.has('font-size'))

  :root {   --primary-color: blue;}body {    background-color: var(--primary-color);}

  CSS.registerProperty({    name: "name-of-property",    syntax: "<property-type>",    inherits: false / true,    initialValue: "initial-value",  });

  @property --property-name {      syntax: "<property-type>";      inherits: false/true;      initial-value: initial-value;  }

<body>    <h1>CSS CUSTOM PROPERTY</h1></body>

@property --primaryColor {    syntax: "<color>";    inherits: false;    initial-value: teal;}body {    height: 100vh;    width: 100%;    display: flex;    justify-content: center;    align-items: center;    background-color: var(--primaryColor);    color: var(--textColor)}