查詢定義

替可重複使用的條件命名一次，便可用於原生 CSS 或 class 後綴。media 名稱描述檢視區或裝置條件；container 名稱描述在使用處選定的容器上檢查的條件。定義必須位於頂層且不帶條件。

條件定義 class 後綴語法，具名條件列出所有預設條件，響應式設計說明如何選擇排版邊界。

定義保存條件。使用處提供容器名稱 card。展開 --dense 會同時保留寬度與樣式檢查。

文字說明

1. --md 定義寬度條件 (width >= 28rem)。--dense 結合該參照與 style(--density: compact)。
2. 使用處 @container card (--dense) 選取名為 card 的容器。
3. 展開產生 @container card (width >= 28rem) and style(--density: compact)。容器名稱不變，也不成為定義的一部分。
4. 相同條件可搭配另一個容器名稱，或最近的合格容器重複使用。圖示呈現編譯階段代入，不是 DOM 樹。

@custom-media

依照 CSS Media Queries 規範定義具名媒體查詢：

@custom-media --wide (width >= 60rem);@custom-media --reading (--wide), print;@custom-media --outside not (--reading);@custom-media --enabled true;@custom-media --disabled false;@media (--reading) {  .article {    max-width: 70ch;  }}

名稱以 -- 開頭。CSS 參照使用 (--name)，標記使用 @name，本地具名區塊則用 @media (--name)。原生 CSS、utility 與 mixin 定義，以及標記查詢共用同一註冊表。

定義支援查詢清單、向前參照、true、false、巢狀布林運算式、否定與媒體型別。展開遵循邏輯：清單保留其或關係，否定套用到完整的被參照運算式。清單內每個查詢形成獨立分支，class 上各條件的分支數會相乘；展開超過 4,096 個分支的 class 不會生成規則，例如重複十二次 @reading 的 class。編譯器輸出一般媒體查詢；單一查詢無法表達混合媒體型別時，會使用巢狀區塊。不需要瀏覽器 custom-media API 或 JavaScript 執行階段註冊。

未定義、循環或無效的參照會造成編譯錯誤。同名定義以較後者為準。media 與 mixin 名稱彼此獨立：@name 選取 media，@apply(--name) 則呼叫 mixin。--starting-style 是保留名稱，因為 @starting-style 已內建。預設集沒有 --breakpoint-* token。專案中具有此前綴的自訂屬性仍是一般 CSS，絕不會隱含宣告 media 條件。寬度上限請用原生長度或個別命名的排版 token。保留外部 URL 的匯入不能包含未解析的 custom-media 查詢；降低語法前先解析這些樣式表匯入，或在匯入上使用一般原生查詢。

@custom-media --card (width >= 40rem); .card { @media (--card) { display: grid; } }

.card {  @media (width >= 40rem) {    display: grid;  }}

@custom-container

Master CSS 在編譯時展開 @custom-container 定義；瀏覽器接收一般 @container 規則。定義只保存條件，要測量哪個容器則在使用條件的位置決定。

@custom-container --md (width >=28rem);@custom-container --max-md not (--md);@custom-container --compact style(--density: compact);@custom-container --dense (--md) and (--compact);@container card (--md) {  .title {    font-size: 1.25rem;  }}

名稱以 -- 開頭。CSS 參照在選填容器名稱後使用 (--name)，例如 @container card not (--md)。標記在容器查詢內使用相同參照：@container(--md) 測量最近的容器，@container(card|--md) 則測量具名容器。原生 CSS、utility 與 mixin 定義，以及標記共用同一註冊表。

定義可以是任何容器條件：尺寸與樣式查詢、not、and、or，以及其他自訂容器的參照，包含向前參照。展開時代入被參照條件；除非原本已是一個群組或完整條件，否則會加上括號，因此 @container card (--dense) 輸出 @container card (width >= 28rem) and style(--density: compact)。容器條件始終可放在單一規則前置部分，展開絕不增加分支。編譯器輸出一般容器查詢，並將各展開條件存入 manifest 的 customContainers。

未定義、循環與空參照都會造成編譯錯誤，以容器名稱開頭的定義也是如此。同名定義以較後者為準，參照該名稱的定義會使用最終版本。容器名稱與自訂 media、mixin 彼此獨立：裸 @md 一律選取自訂 media，絕不選取容器條件。--container-* token 用於設定元素尺寸，絕不提供容器斷點。

@custom-container --roomy (width >= 40rem); .card { @container (--roomy) { display: grid; } }

.card {  @container (width >= 40rem) {    display: grid;  }}