@container 和 :has()：兩個功能強大的全新回應式 API 在 Chromium 105 推出

Una Kravets

容器查詢和 :has() 是在回應式堆積中比對相符。幸好，這兩項功能已在 Chromium 105 中一併推出。這是大型版本，其中提供兩項眾所期盼的回應式介面功能！

容器查詢：簡要摘要

容器查詢可讓開發人員查詢父項選取器，查看其大小和樣式資訊，進而使子項元素擁有回應式樣式邏輯，不受網頁上的位置限制。

開發人員現在可以查詢網頁內元素的大小，而不必依賴可視區域進行樣式輸入 (例如可用空間)。此功能是指元件擁有其回應式樣式邏輯。如此一來，無論在頁面何處，都能附加樣式邏輯，讓元件更有彈性。

使用容器查詢

如要使用容器查詢進行建構，您必須先在父項元素上設定包含項目。方法是在父項容器設定 container-type。您可能有一張包含圖片的資訊卡，部分文字內容看起來會像這樣：

單欄資訊卡。

如要建立容器查詢，請在卡片容器上設定 container-type：

.card-container {
  container-type: inline-size;
}

將 container-type 設為 inline-size，即可查詢父項的內嵌方向大小。在英文 (例如英文) 中，由於文字會內嵌從左到右，因此在英文中，這指的是資訊卡的寬度。

現在，我們可以用 @container，使用該容器將樣式套用至其任何子項：

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

:has() 父項選取器

CSS :has() 虛擬類別可讓開發人員檢查父項元素是否包含具有特定參數的子項。

舉例來說，p:has(span) 表示段落 (p) 選取器，其中有 span。您可以藉此設定父項段落的樣式，或其中的任何內容。您可以利用 figure:has(figcaption) 為包含說明文字的 figure 元素設定樣式，這是一個實用的範例。如要進一步瞭解:has()，請參閱這篇文章，內容由 Jhey Tompkins 提供。

容器查詢和 :has()

您可結合 :has() 的父項選擇能力與容器查詢的父項查詢能力，建立真正動態的內建樣式。

讓我們用火箭卡的第一個範例進一步解釋它。如果您的卡片沒有圖片，該怎麼辦？您可能會想要放大標題，並將格狀版面配置調整為單欄，這樣在沒有圖片的情況下，表格看起來就會更具體。

資訊卡中的文字較大，沒有圖片，且顯示在單欄中。

在這個範例中，含有圖片的資訊卡採用雙欄格線範本，沒有圖片的資訊卡採用單欄版面配置。此外，不含該圖片的資訊卡會改用較大的標題。如要使用 :has() 寫入，請使用下列 CSS。

.card:has(.visual) {
  grid-template-columns: 1fr 1fr;
}

您要尋找類別為 visual 的元素，以套用上述的兩欄樣式。另一個簡潔的 CSS 函式是 :not()。這個規格與 :has() 相同，但功能已久，現在瀏覽器支援也已更臻完善。您甚至可以合併 :has() 和 :not()，如下所示：

.card:not(:has(.visual)) h1 {
  font-size: 4rem;
}

在上述程式碼中，您要編寫一個選取器，在不含 visual 類別的資訊卡中設定 h1 樣式。這樣就能清楚調整字型大小。

平台比一比

上述示範包含 :has()、:not() 和 @container 的組合，但是如果在多個位置看到同一個元素，容器查詢就變得超棒的體驗。讓我們增添樣式，以格狀方式呈現這些資訊卡。

現在，您可以見證現代 CSS 的強大威力。我們能夠使用指定樣式撰寫明確的樣式，以邏輯為基礎建立邏輯，並建立真正健全的元件。Chromium 105 推出了這兩項強大的功能，同時為跨瀏覽器提供支援，成為使用者介面開發人員的精彩時刻！