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