Runtime Rendering

Observe for changes to class names in the DOM tree to manipulate CSS rules and sync to the runtime stylesheet.

We've created a tiny JavaScript package @master/css-runtime that can be imported and enabled immediately in the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css-runtime@rc"></script>
    …
</head>
<body>
    <h1 class="font:40 font:heavy italic m:12x text:center">Hello World</h1>
</body>
</html>

If you haven't done the installation, please see the complete Installation Guide.

Style life cycle

The Master CSS runtime engine uses the standard Web APIs - Mutation Observer to observe the DOM changes in class names at runtime and generate/remove its corresponding CSS rules on the fly.

The following continuous DOM manipulation takes you to understand the behavior of the runtime when the browser is running:

Insert an element with a Master CSS class name into the DOM

const h1 = document.createElement('h1')
h1.className = 'text:center'

A new node <h1> is inserted into the DOM tree:

<h1 class="text:center">Hello World</h1>

The runtime engine observes a new node with the class text:center and generates the corresponding CSS rule:

.text\:center {
    text-align: center
}

Added Master CSS class names to elements in links

h1.classList.add('font:48')

Add class name font:48 to <h1>

<h1 class="text:center font:48">Hello World</h1>

The runtime engine observes that <h1> adds the new class name font:48 and generates the corresponding CSS rules:

.font\:48 {
    font-size: 3rem
}
 
.text\:center {
    text-align: center
}

Remove the Master CSS class name from the connected element

h1.classList.remove('text:center')

Remove class name text:center from <h1>

<h1 class="text:center font:48">Hello World</h1>

The runtime engine observes that the class name text:center is removed from <h1> and removes the corresponding CSS rule:

.font\:48 {
    font-size: 3rem
}
 
.text\:center {
    text-align: center
}

Removes an element with a Master CSS class from the DOM

h1.remove()

Remove the <h1> with class font:48

<h1 class="font:48">Hello World</h1>

The runtime engine observes that the <h1> element with the class name font:48 is removed and removes the corresponding CSS rule:

.font\:48 {
    font-size: 3rem
}

The Master CSS Runtime Rendering relies on the lifecycle of individual elements. Only the Master CSS class names connected to the DOM tree will generate corresponding CSS rules so browsers can calculate with minimal and precise CSS rules.

Due to its runtime execution nature, you can modify the class name directly in the browser by inspecting the element and seeing its changes.

Running style sheet

Where are the generated CSS rules inserted? The runtime engine appends <style id="master"> in <head> during initialization:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css-runtime@rc"></script>
    <style id="master"></style>
</head>

It uses the .insertRule() and .deleteRule() of Web APIs - CSSStyleSheet to manipulate memory locally CSS rules, so any changes made to the CSS text of <style id="master"> cannot be observed by inspecting elements.

Still, you can detect the CSS rules in the current style sheet like this:

const sheet = document.querySelector('style[id="master"]').sheet
console.log(sheet.cssRules)