開始使用

相容性

為新 CSS 功能保留可用的備援方式、驗證瀏覽器行為，並安排第三方樣式在階層串接中的位置。

本頁目錄

Master CSS 產生 CSS；瀏覽器決定能套用哪些屬性、值與選擇器。先建立可用的基礎，在有助改善體驗時加入較新的功能，並檢查既有樣式如何參與階層串接。

這些範例假設已完成安裝，且應用程式已載入 @import '@master/css';。

#確認瀏覽器的基礎需求

預設集使用串接層、OKLCH 色彩與 light-dark() 產生自適應值。為增強功能提供備援方式，不會免除這些基礎需求。請依需支援的瀏覽器，確認瀏覽器基礎需求與廠商前綴。

類別被辨識，不代表保證瀏覽器相容。Master 只會為部分屬性輸出相容前綴，不會為每個新功能提供 polyfill。同樣地，工具回傳 unknown，表示該項檢查尚未驗證此 CSS，並非證明它無效或可安全發布。

#加入功能，保留備援方式

#原生宣告

即使無法自動調整大小，筆記欄位也應維持可編輯。先給予一般 textarea 尺寸並允許垂直調整，再加入 field-sizing: content 作為增強。這個原生屬性可依內容調整控制項大小；最小與最大高度則將它限制在實用範圍內。

field-sizing: content 檢查中……

具備備援方式的筆記欄位

<div class="w-full (max-width:28rem) mx-auto">  <label for="project-note" class="block mb-xs text-sm fg-text-strong">Project notes</label>  <textarea id="project-note" name="note" rows="3" class="block w-full p-sm r-md b(1) b-solid b-line-divider bg-surface-inset text-sm fg-text-strong (resize:vertical) (min-height:6rem) (max-height:12rem) outline(2):focus-visible outline-solid:focus-visible outline-offset(3) (field-sizing:content)@supports(field-sizing:content)">Plan the next release. Review the draft. Check the examples. Test with a keyboard. Verify the small screen. Publish when ready.</textarea></div>

產生的 CSS

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-inset {    background-color: var(--color-surface-inset)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .block {    display: block  }  .mx-auto {    margin-inline: auto  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .outline-offset\(3\) {    outline-offset: calc(3 * 1px)  }  .p-sm {    padding: var(--spacing-sm)  }  .w-full {    width: 100%  }  .\(max-height\:12rem\) {    max-height: 12rem  }  .\(max-width\:28rem\) {    max-width: 28rem  }  .\(min-height\:6rem\) {    min-height: 6rem  }  .\(resize\:vertical\) {    resize: vertical  }  .outline-solid\:focus-visible:focus-visible {    outline-style: solid  }  .outline\(2\)\:focus-visible:focus-visible {    outline-width: calc(2 * 1px)  }  @supports (field-sizing:content) {    .\(field-sizing\:content\)\@supports\(field-sizing\:content\) {      field-sizing: content    }  }}

新增或刪除行數。支援的瀏覽器會讓欄位增高，最高到 12rem；否則保留初始大小。兩種情況都能捲動與調整大小。

(field-sizing:content) 提供原生宣告。其 @supports(field-sizing:content) 後綴會將宣告置於 CSS 功能查詢內。查詢不符合時，基礎樣式與一般 textarea 行為仍會保留。

預覽會檢查目前瀏覽器的語法支援，也請在目標瀏覽器測試實際編輯行為。若要在支援的瀏覽器檢查備援方式，可暫時移除條件式類別：欄位應停止自動增高，但仍可透過捲動讀取所有文字。這是在隔離增強功能，並非模擬舊瀏覽器。

使用產生的 CSS 檢查輸出的條件。條件記錄了類別語法；原生 CSS 可表達更複雜的功能查詢。

#新的選擇器

依選擇器提供的增強功能也適用相同做法。此處 :has(:checked) 會在核取方塊勾選時，讓標籤出現藍色邊框。即使不支援該選擇器，原生核取方塊仍會記錄選擇：

選取狀態與可選的強調效果

<label class="flex items-center gap-sm w-fit mx-auto p-sm r-md b(1) b-solid b-line-divider bg-surface-raised text-sm fg-text-strong b-blue-60:has(:checked)">  <input type="checkbox" name="updates" class="m(0) shrink(0) (accent-color:currentColor)">  <span>Send me release notes</span></label>

產生的 CSS

@layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .items-center {    align-items: center  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .flex {    display: flex  }  .shrink\(0\) {    flex-shrink: 0  }  .gap-sm {    gap: var(--spacing-sm)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mx-auto {    margin-inline: auto  }  .p-sm {    padding: var(--spacing-sm)  }  .w-fit {    width: fit-content  }  .\(accent-color\:currentColor\) {    accent-color: currentColor  }  .b-blue-60\:has\(\:checked\):has(:checked) {    border-color: var(--color-blue-60)  }}

勾選核取方塊。支援的瀏覽器也會改變標籤邊框；勾選記號才是選擇狀態的主要提示。

讓基礎樣式獨立於新選擇器。不要讓必要控制項或內容依賴增強功能。選擇器拼法與組合方式，請參閱選擇器。

#將第三方 CSS 納入階層串接

若一般 utility 應覆寫函式庫的一般樣式，請將該 CSS 匯入較早的 defaults 層。在 Master 整合處理的應用程式 CSS 進入點中，於這些匯入之前宣告串接層順序。

若專案已使用 Swiper 核心、導覽與分頁樣式，請透過此進入點載入，不要另外在其他地方匯入未分層副本：

app.css

@layer theme, base, defaults, components, utilities;@import 'swiper/css' layer(defaults);@import 'swiper/css/navigation' layer(defaults);@import 'swiper/css/pagination' layer(defaults);@import '@master/css';@layer components {  .swiper-slide {    background-color: var(--color-surface-raised);  }}

在輪播既有標記中，一張投影片可保留元件表面，另一張則加入區域 utility：

<div class="swiper-slide">Default surface</div><div class="swiper-slide bg-blue-60 fg-white">Featured slide</div>

utilities 中的一般背景宣告會優先於 components，後者又高於 defaults。調整 HTML 類別名稱順序，不會改變結果。

加入更強覆寫前，請先在瀏覽器開發者工具檢查競爭宣告。同一作者來源與脈絡中，一般未分層樣式優先於一般已分層樣式。廠商 CSS 的 !important 宣告也會優先於一般 utility；重要宣告會反轉串接層順序。這些是原生階層串接規則，不是 Master 專屬優先系統。串接層提供逐步診斷方式。

Master 管理的樣式表預設保留原生選擇器。若啟用原生修剪，請在你可控制的樣式表中，透過 @preserve native 保護廠商、CMS 與外部注入的選擇器，或將這些來源排除於修剪範圍。第三方小工具使用的選擇器，不一定會出現在應用程式掃描的標記中。