前言

Master CSS 透過結構化的語法，涵蓋了所有原生的 CSS 功能，也就是說 Master CSS 的核心引擎，幾乎不會影響各家瀏覽器及排版引擎對 CSS 的支援。

樣式宣告

語法：property:value
範例：display:block / display:flex / text-align:center

只要將屬性與值撰寫在標籤元素 class 類別中，就可以讓標籤元素套用樣式。這邊要注意的是屬性與值之間的冒號 : 前後是不需要空格的。

<div class="display:block text-align:center">
    <h1 class="color:blue ">Hello World</h1>
</div>

這邊會建議先了解基本的樣式宣告，雖然寫起來冗長，但熟悉之後再來了解簡寫與縮寫，會比較快上手。

任意屬性

語法：{property:value}

範例：{display:block}

Master CSS 提供使用大括號 {} 將 CSS 包裹起來，以表示直接使用該屬性與值，也就是可以像原生那般寫 CSS，通常用來處理非標準或不受支援的 CSS 屬性。

以下程式碼來說：

<div class="{block-size:5rem}">...</div>

最終產生如下 CSS 規則：

.\{block-size\:5rem\} {
    block-size: 5rem;
}

瀏覽器對 Master CSS 的支援程度

我們先從 Master CSS 的核心技術說起，Master CSS 的虛擬 CSS 引擎的核心使用 MutationObserver，藉由觀察 HTML 中的 DOM 樹，並透過遍歷每個類別（class）等一系列的流程，最終產生相應的 CSS 規則並即時注入至瀏覽器之中。

因此，您幾乎不需要擔心瀏覽器是否支援，因為支援程度取決於您使用的 CSS 功能，要檢查特定 CSS 功能的支援度，推薦使用 caniuse.com。

供應商前綴（Vendor Prefixes）

在大多數情況下，你使用的 CSS 規則，Master CSS 都為自動的添加上供應商的前綴，以 backdrop-filter 屬性為例，當你撰寫下程式碼時：

<div class="backdrop-filter:blur(4px)">…</div>

在 Chrome v117.0 瀏覽器下產生如下 CSS 規則：

.backdrop-filter\:blur\(4px\) {
    backdrop-filter: blur(4px);
}

在 Safari v16.6 瀏覽器下產生如下 CSS 規則，可以發現加上了 -webkit- 前綴。

.backdrop-filter\:blur\(4px\) {
    -webkit-backdrop-filter: blur(4px);
}

這些尚未完成標準化的 CSS 屬性，每個供應上都會加上對應的前綴，Master CSS 也很聰明的會協助自動添加。

就連使用 ::scrollbar 選擇器：

<div class="background-color:black::scrollbar">…</div>

Master 對於這些 CSS 的選擇器也同樣的會被添加上前綴為 ::-webkit-scrollbar：

.background-color\:black\:\:scrollbar::-webkit-scrollbar {
    background-color: rgb(0, 0, 0);
}

最新的 CSS 功能

假設一個全新的 CSS 屬性 new-property 剛推出，而 Master CSS 尚未將其納入核心規則之前，你可以通過任意屬性語法 {} （使用大括號括起來）提前使用它。

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

產生的 CSS：

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

直至 Master CSS 支援解析處理後，就可以省略大括號 {}：

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

產生的 CSS：

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

Important

語法：property:value!

範例：text:center!

如同原生 CSS 的 !important，可以使驚嘆號 ! 來標記樣式為重要的。

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

屬性值的單位

語法：property:value unit
範例：fonst-size:16px / border-radius:50%

Master CSS 要指定屬性值單位，也非常的直覺，只要在語法 value 值的後面加上 unit 單位就可以了。

Master CSS 允許所有的 CSS 單位，包含了 px , em , % ,  ex , ch, rem , vw , vh , vmin , vmax , cm , mm , in , pt , pc , ms , s , deg , 等。

<div class="width:50%">
    <h1 class="fonst-size:16px">Hello World</h1>
</div>

屬性值的單位轉換

當我們在寫字體的大小或長寬的尺寸，可能會使用到 rem，你是否也常發生需要去查對應表或拿出計算機，計算 64px 等於多少 rem，12rem 是多少 px 呢？

假設我們設定外距為 16px 字體為 48px，Master CSS 會匹配到所有依賴像素為單位的屬性值，純數字且未使用 px，該數值會被轉換成 rem，16 = 16px = 1rem。

<span class="margin:16 fonst-size:48">Hello World</span>

產生的 CSS 規則如下：

.margin\:16 {
    margin: 1rem;
}

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

小數值與負數值

在許多情況下，你可以很輕易的使用小數點與負數值。

例如，設定不透明度 opacity 為 0.5，你可以使用 0.5 或 .5 來當作屬性值：

<span class="opacity:0.5">Hello</span>
<span class="opacity:.5">World</span>

使用負數值

<span class="margin-top:-32">Hello World</span>

函數數值

使用 Master CSS，你甚至可以直接聲明原生函數（functions）。

<div class="width:calc(100%-1rem) background-color:rgba(0,0,0,.5)">