大家好，我是 CUGGZ。

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

@container：容器查詢

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

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

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

要想使用容器查詢，首先要在父元素上設(shè)置 container-type，該屬性用來聲明元素是一個查詢?nèi)萜鳎⑶叶x查詢?nèi)萜鞯念愋?。聲明了該屬性就意味著告訴瀏覽器，在該元素上創(chuàng)建一個容器上下文，之后可能要查詢此容器。

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

要創(chuàng)建容器查詢，首先要在卡片容器上設(shè)置容器類型（container-type）：

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

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

現(xiàn)在，我們可以通過 @container 將樣式應(yīng)用于其任何子項：

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

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

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

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

has()：父選擇器

CSS :has()?偽類使開發(fā)人員能夠檢查父元素是否包含具有特定參數(shù)的子元素。例如，p:has(span) 表示一個段落 (p) 選擇器，其中有一個 span?？梢允褂盟鼇碓O(shè)置父元素（段落）本身的樣式，或設(shè)置其子元素的樣式。

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

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

讓我們來基于上面的例子進(jìn)行改造，如果有卡片沒有圖像，就增加標(biāo)題的大小，并將網(wǎng)格布局調(diào)整為單列。如下圖所示：

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

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

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

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

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

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

總結(jié)

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

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

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

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