Browser Support

The core engine of Master CSS hardly affects CSS support for browsers.

The Master CSS runtime engine uses Web APIs - Mutation Observer which even IE 11 supports to observe the DOM tree and traverse each class through a high-performant rule engine to generate the corresponding CSS rules and inject it into the browser instantly.

You hardly need to worry about browser support, since support depends on which CSS features you use.

To check for specific CSS feature support, visiting caniuse.com is always the best choice.

Built-in vendor prefixes

Most CSS rules are prepended with the appropriate vendor prefix.

Auto-prefixed CSS properties

Take backdrop-filter as an example:

<div class="backdrop-filter:blur(16) {-webkit-backdrop-filter:blur(1rem)}">…</div>
<div class="backdrop-filter:blur(16)">…</div>

backdrop-filter will be automatically prefixed by the vendor and Generated CSS:

.backdrop-filter\:blur\(16\) {
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem)
}

Auto-prefixed CSS selectors

Same goes for some CSS selectors.

<div class="bg:slate-90::-webkit-scrollbar">…</div>
<div class="bg:slate-90::scrollbar">…</div>

::scrollbar will be replaced to ::-webkit-scrollbar:

.bg\:slate-90\:\:scrollbar::-webkit-scrollbar {
    background-color: rgb(29 39 58)
}

Using latest CSS features

Master CSS has built-in commonly used CSS properties, and you hardly need to extend rules to transform styles, but once new CSS features are launched, how to use them immediately?

Support the new CSS property

Assuming that a brand new CSS property of new-property has just been launched, you can use it ahead of time through arbitrary property declarations {} before we include it in the core rules:

<div class="{new-property:value}">…</div>

Generated CSS:

.\{new-property\:value\} {
    new-property: value
}

Once we support it, you can omit the {}:

<div class="new-property:value">…</div>

Generated CSS:

.new-property\:value {
    new-property: value
}

Support the new CSS selector

Master CSS will extract the applied selector string according to the syntax structure and insert it into the corresponding CSS rule, you can enter any string after : or ::.

This means that the selector can be used with the most standard syntax right away, as long as the browser supports it.

<form class="outline:2|solid|red:has(:checked)">…</form>

Generated CSS:

.light {
    --red: 229 46 46
}
 
.dark {
    --red: 247 63 63
}
 
.outline\:2\|solid\|red\:has\(\:checked\):has(:checked) {
    outline: 0.125rem solid rgb(var(--red))
}