開始使用樣式查詢

Una Kravets

查詢父項的內嵌大小，以及容器查詢單元值的功能，最近已在所有現代瀏覽器引擎中穩定支援。

不過，容器規格不僅包含大小查詢，還可查詢父項的樣式值。從 Chromium 111 開始，您將能為自訂屬性值套用樣式容器，並查詢父項元素中自訂屬性的值。

也就是說，我們在 CSS 中對樣式的邏輯控制更強大，且能更妥善地將應用程式的邏輯和資料層與樣式分開。

CSS Containment Module Level 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-list 提供 container-name，並在樣式查詢中參照該元素，根據 .card-list 的樣式將樣式套用至 .card。

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

一般而言，為容器命名是最佳做法，這樣就能清楚瞭解查詢內容，並更輕鬆地存取這些容器。舉例來說，如果您想直接設定 .card 內的元素樣式，這項功能就非常實用。如果沒有 .card-container 上的具名容器，他們就無法直接查詢。

但實際操作時，這些概念會變得更容易理解。讓我們來看幾個範例：

實際運用樣式查詢

如果您有可重複使用的元件，且有多種變化形式，或是無法控管所有樣式，但需要在特定情況下套用變更，樣式查詢就特別實用。這個範例顯示一組共用相同卡片元件的產品卡。部分產品卡有額外的詳細資料/附註，例如「新品」或「庫存不足」，這些資訊是由名為 --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 可能會顯示多雲天氣。

透過 JavaScript 更新自訂屬性值時，可以順利完成，無論是在設定 DOM 模型時 (即在架構中建構元件時)，或隨時使用 <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 樣式實作樣式查詢。這已是目前規格層級的一部分，但尚未在任何瀏覽器中實作。解決未完成的問題後，布林內容評估預計會新增至目前的規格層級，而範圍查詢則預計會新增至下一個規格層級。