容器查詢和 :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 推出了這兩項強大的功能,同時為跨瀏覽器提供支援,成為使用者介面開發人員的精彩時刻!