@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 中推出，並獲得跨瀏覽器支援的動能，這對 UI 開發人員來說是令人振奮的時期！