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

容器查詢和 :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 開發人員！