語意元件調整

使用樣式查詢 (@container style()) 觸發情境變化，不必硬式編碼產生或回應各個情境的內容。這可減少設計系統耦合，並改善擴充性和元件封裝。

舉例來說，section.featured { --surface: featured } 規則可以標記情境，而到達網頁也可能透過 main { --surface: featured } 預設為該情境。元件會選擇回應 --surface: featured：資訊卡會顯示促銷徽章、按鈕會預設為填滿樣式等。

樣式查詢可讓兩端保持分離：精選介面絕不會命名要調整的元素，而元件也絕不會檢查產生內容的項目。兩端都能獨立擴充 (新元件、新精選介面)，不會影響另一端。後代選取器 (例如 .featured .button) 則會強制執行相反操作：選取器必須對關係的兩端進行編碼，且只要任一端發生變更，就必須變更。

本指南的使用時機

本指南涵蓋行為變更：元件根據情境決定要算繪的內容、如何排列自身，或要呈現哪個變化版本，例如隱藏或顯示徽章、切換版面配置方向，或切換按鈕變化版本。

如果需要權杖層級的變更，例如密度模式、主題或其他高階權杖，可統一調整多個元件的邊框間距和顏色等值，請參閱「設計權杖反應性」。

選擇合適的工具

當情境關係的兩端可能獨立變更時，請使用樣式查詢，例如新元素可能開始產生情境，或新元件可能開始對情境做出反應。間接性在擴充性和封裝性方面具有優勢，且樣式查詢會跨越子系選取器無法跨越的 Shadow DOM 邊界。如果不需要這種彈性，建議使用較簡單的工具：

下層選取器 (.toolbar .button)：固定的一次性關係，無法重複使用或擴充。YAGNI 適用：請勿新增不會使用的間接。
大小查詢 (@container (min-width: …))：版面配置和密度變更由可用空間決定，而非語意狀態。
樣式查詢 (@container style(…))：語意狀態，也就是元件在特定情境中應呈現、排列或顯示的內容。

導入指令

使用容器上的 CSS 自訂屬性，定義語意情境旗標。
請勿為樣式查詢設定 container-type；樣式查詢會查詢最接近祖系上繼承的自訂屬性，不需要明確的容器環境。
必要：使用 @container style(--property: value) 將條件式樣式套用至子系元素。樣式查詢無法比對設定屬性的元素，只能比對其子系。
建議：如果關係必須保持可擴充，或跨元件/Shadow DOM 邊界 (請參閱上方的「選擇合適的工具」)，請優先使用樣式查詢，而非子系選取器。不過，如果是固定的一次性關係，且間接關係沒有任何好處，則應保留子系選取器。

導入範例

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

備用策略

在容器樣式查詢廣泛推出前，請將其做為漸進式強化功能：提供適用於所有位置的選取器預設值，並在支援時讓樣式查詢覆寫該預設值。在內容選取器上使用 :where()，讓樣式查詢 (相同特異性，在來源順序中較後) 自動勝出。

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

選取器備用方案會將內容比對樣式與類別名稱連結，進而將元件與其 DOM 位置結合。當樣式查詢廣泛支援後，即可移除 :where() 規則。