容器查詢隆重登場!
好消息:網頁瀏覽器開始推出眾所期盼的其中一項開發人員功能!自 Chromium 105 和 Safari 16 推出後,您現在可以在這些瀏覽器中建立以大小為依據的容器查詢,並使用容器查詢單位值。為了更容易使用以大小為依據的容器查詢和 cq
單位,Aurora 團隊不斷努力更新容器查詢 Polyfill,以支援更多瀏覽器和使用情境,讓您可放心立即使用這項強大的功能。
什麼是容器查詢?
容器查詢是 CSS 功能,可讓您編寫樣式邏輯,指定父項元素的地圖項目來設定子項的樣式。您可以查詢父項的大小,建立真正以元件為基礎的回應式設計。比起只提供可視區域大小資訊的媒體查詢,這種更精細實用的資訊。
透過容器查詢,您可以編寫可重複使用的元件,這些元件的外觀會根據網頁在頁面中的位置而不同。因此更加靈活彈性,且能回應所有頁面和範本。
使用容器查詢
假設您具備 HTML:
<!-- card parent -->
<div class=”card-parent”>
<div class=”card>
<!-- card contents -->
…
</div>
</div>
如要使用容器查詢,請先為您要追蹤的父項元素設定包含項目。方法是設定 container-type
屬性,或使用 container
簡寫同時設定容器類型和容器名稱。
.card-parent {
/* query the inline-direction size of this parent */
container-type: inline-size;
}
現在,您可以使用 @container
規則,根據最接近的父項設定樣式。在如上圖這樣的設計中,資訊卡可能從一欄分成兩欄,請輸入以下內容:
@container (min-width: 300px) {
.card {
/* styles to apply when the card container (.card-parent in this case) is >= 300px */
/* I.e. shift from 1-column to 2-column layout: */
grid-template-columns: 1fr 1fr;
}
}
為更美觀和明確,請為父項元素容器命名:
.card-parent {
container-type: inline-size;
/* set name here, or write this in one line using the container shorthand */
container-name: card-container;
}
然後將先前的程式碼重新編寫為:
@container card-container (min-width: 300px) {
.card {
grid-template-columns: 1fr 1fr;
}
}
容器查詢單元
此外,為了讓容器查詢更加實用,您也可以採用以容器為基礎的單位值。下表列出可能的容器單位值,以及這些值與容器大小對應的方式:
單位 | 相對於 |
---|---|
cqw | 查詢容器寬度的 1% |
cqh | 查詢容器高度的 1% |
cqi | 查詢容器內嵌大小的 1% |
cqb | 查詢容器的 1% 區塊大小 |
cqmin | cqi 或 cqb 的較小值 |
cqmax | cqi 或 cqb 較大的值 |
回應式字體排版就是使用容器式單元的方法之一。以可視區域為基礎的單位 (例如 vh
、vb
、vw
和 vi
) 可用來調整螢幕上的任何元素大小。
.card h2 {
font-size: 15cqi;
}
這段程式碼將使容器內嵌大小 (寬度) 的字型變大 15%,代表文字會隨著內嵌大小 (寬度) 增加或縮小而變大。如要進一步達成這個目的,請使用 clamp()
函式設定字體排版的最小和最大尺寸限制,並根據容器大小進行調整:
.card h2 {
font-size: clamp(1.5rem, 15cqi, 3rem);
}
現在標頭一律不會大於 3rem
或小於 .5rem
,但會在容器之間任何位置佔用 15% 的容器內嵌大小。
這項示範可進一步進一步,將較寬的資訊卡調整為縮小範圍,以 2 欄呈現。
容器查詢 polyfill
容器查詢是一項強大的功能,因此我們希望您能自在將這項查詢整合至專案中,也瞭解到瀏覽器支援是重要的一環。因此,我們持續致力改進容器查詢多邊形。此 polyfill 在一般情況下可支援:
- Firefox 69 以上版本
- Chrome 79 以上版本
- Edge 79 以上版本
- Safari 13.4 以上版本
壓縮後的檔案大小不到 9 KB,並搭配使用 ResizeObserver 和 MutationObserver,以支援目前在穩定版瀏覽器中提供的完整 @container 查詢語法:
- 離散查詢 (
width: 300px
和min-width: 300px
)。 - 範圍查詢 (
200px < width < 400px
和width < 400px
)。 - 屬性和主要畫面格中的容器相對長度單位 (
cqw
、cqh
、cqi
、cqb
、cqmin
和cqmax
)。
使用容器查詢 polyfill
如要使用 polyfill,請在文件標題中加入以下指令碼標記:
<script type="module">
if (!("container" in document.documentElement.style)) {
import("https://unpkg.com/container-query-polyfill@^0.2.0");
}
</script>
您可能也想使用服務,根據 User-Agent
來建立有條件的 polyfill,或是在自己的來源自行託管。
為提供最佳使用者體驗,建議您一開始只對需捲動位置的內容使用 polyfill,並使用 @supports
查詢暫時將其替換為載入指標,直到 polyfill 準備好顯示為止:
@supports not (container-type: inline-size) {
.container,
footer {
display: none;
}
.loader {
display: flex;
}
}
在速度夠快的網路和裝置,或原生支援容器查詢的裝置中,系統一律不會顯示這個載入指標。
全新 Polyfill 功能
更新後的 polyfill 可支援:
- 巢狀
@container
規則。 - 支援在
@supports
和@media
查詢下建立巢狀@container
規則,反之亦然。 - 系統會在 polyfill 載入後傳遞條件式 CSS (例如
@supports (container-type: inline-size)
)。 - 完整的 CSS 語法支援 (使用註解放在任何語法皆有效時不再出現問題)。
- 垂直書寫模式 (透過寫入模式)。
- 查詢條件、屬性宣告和動畫主要畫面格內支援容器相對單元 (
cqw
、cqh
等)。 查詢條件支援rem
和em
。 - 展開的容器查詢語法:
- 範圍語法 (例如
(200px < width < 400px)
)。 - 等式查詢 (例如
(width = 200px)
)。
- 範圍語法 (例如
- 虛擬元素,例如
::before
和::after
。 - 系統支援不含
:is(...)
/:where(...)
的瀏覽器 (可選用替代方案) orientation
和aspect-ratio
特徵查詢。- 根據功能正確篩選查詢 (例如使用水平書寫模式,在
container: inline-size
中正確查詢height
)。 - DOM 異動 (例如,在執行階段移除
<style>
和<link>
元素)。
Polyfill 限制和警告
如果您使用的是容器查詢 polyfill,其中有幾個功能需要留意:
- 目前尚不支援 Shadow DOM。
@media
查詢條件不支援容器相對單元 (例如cqw
和cqh
)。- Safari:15.4 以下版本的動畫主要畫面格不支援容器相對單元。
- 查詢條件尚未支援
calc()
、min()
、max()
或其他數學函式。 - 這個 polyfill 僅適用於內嵌和相同來源 CSS。不支援跨來源樣式表和 iframe 中的樣式表 (除非手動載入多邊形)。
layout
和style
隔離功能需要基礎瀏覽器支援:- Safari 15.4 以上版本
- Firefox 目前不支援樣式包含,但可在其中運作。
警告
- 為避免影響 FID 和 CLS,即使已同步載入第一個版面配置,Polyfill 也無法保證第一個版面配置的發生時間,但會盡量避免嚴重延遲 LCP。換句話說,在進行首次繪製時,您不該依賴這一點。
- 產生
ResizeObserver Loop Errors
。原始的 Polyfill 也會執行這些動作,但值得一提的是這是因為評估查詢後,container-type: inline-size
的區塊大小可能會改變,但ResizeObserver
無法明確說明我們不在乎區塊大小變更。 - 這個 polyfill 是根據 Web Platform 測試進行測試,且由於 JavaScript API 等某些功能未經聚合處理,因此傳遞率為 70%,因此傳遞率刻意接近 70%。
- 2.23% 以下使用者的瀏覽器必須採用
:where()
因應措施:- Safari 14
- Chromium 88
- Edge 88
- Samsung 網際網路 15
- Firefox 78