大家好，我是 CUGGZ。

Chrome 105 測試版于 2022 年 8 月 4 日發布，預計 2022 年 8 月下旬成為穩定版。@container?（容器查詢） 和 :has()（父選擇器） 這兩個強大的新響應式 API 將登陸 Chrome 105。下面就來看看這兩個強大功能的妙用！

@container：容器查詢

容器查詢使開發人員能夠查詢父選擇器的大小和樣式信息，使子元素可以擁有其響應式樣式邏輯，無論它位于網頁上的哪個位置。

開發人員現在也可以查詢頁面內元素的大小，而不是依賴于視口來設置輸入（如可用空間）的樣式。這個功能意味著組件擁有了其響應式樣式邏輯。這使得組件更具彈性，因為樣式邏輯與之相連，無論它出現在頁面上的什么位置。

目前瀏覽器對容器查詢的支持如下：

要想使用容器查詢，首先要在父元素上設置 container-type，該屬性用來聲明元素是一個查詢容器，并且定義查詢容器的類型。聲明了該屬性就意味著告訴瀏覽器，在該元素上創建一個容器上下文，之后可能要查詢此容器。

來看一個例子，有一個帶有圖像和文本內容的卡片，如下所示：

要創建容器查詢，首先要在卡片容器上設置容器類型（container-type）：

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

將 container-type? 設置為 inline-size? 就會查詢父級的 inline-direction 大小。在像英語這樣的拉丁語言中，這將是卡片的寬度，因為文本從左到右內聯流動。

現在，我們可以通過 @container 將樣式應用于其任何子項：

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

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

這里，當容器寬度小于等于 400px 時，@container 中的樣式就會生效。

Dmeo：https://codepen.io/web-dot-dev/pen/dymdbpg

has()：父選擇器

CSS :has()?偽類使開發人員能夠檢查父元素是否包含具有特定參數的子元素。例如，p:has(span) 表示一個段落 (p) 選擇器，其中有一個 span。可以使用它來設置父元素（段落）本身的樣式，或設置其子元素的樣式。

目前瀏覽器對父選擇器的支持如下：

我們可以將 ?:has() 的父選擇功能與容器查詢的父查詢功能結合起來，以創建一些真正動態的樣式。

讓我們來基于上面的例子進行改造，如果有卡片沒有圖像，就增加標題的大小，并將網格布局調整為單列。如下圖所示：

在這個例子中，帶有圖像的卡片是兩列布局，沒有圖像的卡片是單列布局。此外，沒有圖像的卡片具有更大的標題。使用 :has() 編寫此代碼：

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

上面的代碼正在尋找一個具有 .visual? 類的元素來應用兩列樣式。另一個很簡潔的 CSS 函數是 :not()?，它和 :has()? 具有相同的規范，但已經存在了更長時間并且具有更好的瀏覽器支持。我們可以組合使用 :has()? 和 :not()，如下所示：

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

在上面的代碼中，定義了一個選擇器，該選擇器為不包含 .visual 類的卡片設置 h1 的樣式。

Demo：https://codepen.io/web-dot-dev/pen/JjLpPKv

總結

上面的例子組合使用了 :has()、:not()? 和 @container。給這些代碼添加一些樣式，并在網格中并排展示這些卡片，效果如下：

Demo：https://codepen.io/web-dot-dev/pen/XWEZrje

通過上面的例子，可以看到現代 CSS 是如此強大。期待這兩個強大的功能登陸 Chromium 105 并獲得更多瀏覽器的支持！

參考：https://developer.chrome.com/blog/has-with-cq-m105/