開始使用樣式查詢

Una Kravets

查詢父項內嵌大小和容器查詢單位值的功能，最近已在所有新型瀏覽器引擎中穩定支援。

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：110。
  • Safari：16 歲。

資料來源

不過，包含規格不只包含大小查詢，還可查詢父項的樣式值。自 Chromium 111 起，您將能對自訂屬性值套用樣式包含設定，並查詢父項元素以取得自訂屬性值。

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：不支援。
  • Safari：18 歲。

資料來源

這表示我們在 CSS 中能更有條理地控制樣式，並能更妥善地將應用程式的邏輯和資料層與其樣式分開。

CSS 容器模組第 3 級規格涵蓋大小和樣式查詢，可讓您從父項查詢任何樣式，包括 font-weight: 800 等屬性和值組合。不過，在這項功能推出後，樣式查詢目前僅支援 CSS 自訂屬性值。無論是結合樣式，還是區隔資料與設計，這個做法都非常實用。讓我們來看看如何使用樣式查詢搭配 CSS 自訂屬性：

開始使用樣式查詢

假設我們採用下列 HTML：

<ul class="card-list">
  <li class="card-container">
    <div class="card">
      ...
    </div>
  </li>
</ul>

您必須先設定容器元素，才能使用樣式查詢。這項操作需要略有不同的做法，取決於您要查詢的是直接或間接的父項。

查詢直接上層發布商

樣式查詢的示意圖。

與樣式查詢不同，您不需要使用 container-type 或 container 屬性對 .card-container 套用包含設定，.card 才能查詢其直接父項的樣式。不過，我們必須將樣式 (在本例中為自訂屬性值) 套用至容器 (在本例中為 .card-container) 或任何包含正在 DOM 設定樣式元素的任何元素。我們無法在使用該查詢的直接元素上套用查詢的樣式，因為這可能會導致無限迴圈。

若要直接查詢父項，您可以編寫：

/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown; 
    ...
  }
}

您可能已經注意到，樣式查詢會使用 style() 包裝查詢。這麼做是為了避免樣式與大小值產生歧異。例如，您可以編寫 @container (min-width: 200px) { … } 形式的容器寬度查詢。如果父項容器寬度至少為 200 像素，就會套用樣式。不過，min-width 也可以是 CSS 屬性，您可以使用樣式查詢來查詢 min-width 的 CSS 值。因此，建議您使用 style() 包裝函式來提供清楚的差異：@container style(min-width: 200px) { … }。

為非直接父項設定樣式

如果您想查詢非直接父項的任何元素樣式，就必須為該元素提供 container-name。舉例來說，我們可以為 .card 套用 .card-list 的樣式，方法是為 .card-list 提供 container-name，並在樣式查詢中參照該樣式。

/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
  .card {
    ...
  }
}

一般而言，最佳做法是為容器命名，以便清楚指出要查詢的內容，並更輕鬆地存取這些容器。如果想直接在 .card 內的元素設定樣式，這個做法很實用。如果 .card-container 上沒有命名容器，就無法直接查詢。

但實際上，這些 能讓您在實務上更為合理。以下舉幾個例子：

樣式查詢實際操作

示範圖片包含多張產品資訊卡，其中部分標有「new」或「low stock」標記，而「low stock」資訊卡則有紅色背景。

當您有可重複使用的元件，且該元件有多種變化版本，或是您無法控制所有樣式，但需要在特定情況下套用變更時，樣式查詢就特別實用。這個範例顯示共用相同資訊卡元件的產品資訊卡。部分產品資訊卡會顯示額外詳細資料/附註，例如「新品」或「庫存不足」，這些資訊是由名為 --detail 的自訂屬性觸發。此外，如果產品標示「低庫存」，則會加上深紅色的邊框背景。這類資訊很可能會由伺服器算繪，並可透過內嵌樣式套用至資訊卡，如下所示：

 <div class="product-list">
  <div class="product-card-container" style="--detail: new">
    <div class="product-card">
      <div class="media">
        <img .../>
      <div class="comment-block"></div>
    </div>
  </div>
  <div class="meta">
    ...
  </div>
  </div>
  <div class="product-card-container" style="--detail: low-stock">
    ...
  </div>
  <div class="product-card-container">
    ...
  </div>
  ...
</div>

根據這個結構化資料，您可以將值傳遞至 --detail，並使用以下 CSS 自訂屬性套用樣式：

@container style(--detail: new) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'New';
    border: 1px solid currentColor;
    background: white;
    ...
  }
}

@container style(--detail: low-stock) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'Low Stock';
    border: 1px solid currentColor;
    background: white;
    ...
  }
  
  .media-img {
    border: 2px solid brickred;
  }
}

上述程式碼可讓我們為 --detail: low-stock 和 --detail: new 套用方塊，但您可能會注意到程式碼區塊中有些重複的內容。目前，目前無法只查詢 --detail 與 @container style(--detail) 是否出現，這可讓您有效共用樣式，減少重複的情況。這項功能目前在工作群組中討論中。

天氣資訊卡

先前的範例使用單一自訂屬性，其中包含多個可能的值，用於套用樣式。但您也可以使用和查詢多項自訂屬性，混用這兩種方式。請參考以下天氣資訊卡範例：

天氣資訊卡示範。

如要為這些資訊卡設定背景漸層和圖示樣式，請查看天氣特徵，例如「多雲」、「下雨」或「晴朗」：

@container style(--sunny: true) {
  .weather-card {
    background: linear-gradient(-30deg, yellow, orange);
  }
  
  .weather-card:after {
    content: url(<data-uri-for-demo-brevity>);
    background: gold;
  }
}

如此一來，您就能根據每張資訊卡的特色設定樣式。不過，您也可以使用 and 組合器設定特徵 (自訂屬性) 組合的樣式，方法與使用媒體查詢時相同。舉例來說，如果天氣有雲有晴，就會像這樣：

@container style(--sunny: true) and style(--cloudy: true) {
    .weather-card {
      background: linear-gradient(24deg, pink, violet);
    }
  
  .weather-card:after {
      content: url(<data-uri-for-demo-brevity>);
      background: violet;
  }
}

將資料與設計分開

在這兩個示範中，將資料層 (即在網頁上算繪的 DOM) 與套用的樣式分開，可帶來結構上的優勢。樣式會以元件樣式中可能的變化版本撰寫，而端點可以傳送資料，以便後續用於為元件設定樣式。您可以使用單一值 (例如在第一個案例中更新 --detail 值)，或多個變數 (例如在第二個案例中設定 --rainy 或 --cloudy 或 --sunny)。最棒的是，您也可以結合這些值，同時檢查 --sunny 和 --cloudy 可能會顯示部分多雲的樣式。

您可以在設定 DOM 模型時 (也就是在架構中建構元件時)，輕鬆透過 JavaScript 更新自訂屬性值，或是使用 <parentElem>.style.setProperty('--myProperty’, <value>) 隨時更新。I

以下是透過幾行程式碼更新按鈕的 --theme，並使用樣式查詢和自訂屬性 (--theme) 套用樣式的示範：

使用樣式查詢為資訊卡設定樣式，用於更新自訂屬性值的 JavaScript 為：

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})

本文介紹的功能只是第一步。您可以期待容器查詢提供更多功能，協助您建立動態回應式介面。特別是風格查詢，仍有幾個未解決的問題。其一是針對 CSS 樣式 (不限於自訂屬性) 實作樣式查詢。這項功能已納入目前的規格層級，但尚未在任何瀏覽器中實作。解決尚未解決的問題時，布林值評估應加入目前的規格層級，而範圍查詢預計會在下一個規格層級加入。