容器查詢提供高度動態且彈性的回應式設計方法。容器查詢會使用 @container at-rule。這與使用 @media 的媒體查詢類似，但 @container 會查詢父項容器來取得樣式資訊，而不是可視區域和使用者代理程式。
容器查詢是新推出的基準。
藉由回應容器大小，容器查詢可讓元件根據本身在介面中的位置進行調整。舉例來說，資訊卡元件可根據其所在容器 (例如側欄、主要區塊或頁面主體中的格線) 調整其大小和樣式。
如下圖所示，您可以合併巨集版面配置的媒體查詢、微型版面配置的容器查詢，以及以使用者偏好為基礎的媒體查詢，建立強大的回應式設計系統。請參閱這篇文章，進一步瞭解容器查詢和新版回應式設計。
本文屬於系列文章，探討電子商務公司如何運用新的 CSS 和 UI 功能提升網站成效。這次我們會深入探討部分公司如何使用容器查詢，並從中受益。
redBus
redBus 會負責維護行動版和電腦版的程式碼，並提供不同的程式碼。在 Things to Do Center 和 cargo 頁面中實作容器查詢後，他們可以將這段程式碼整合至這些網站的單一程式碼集。這使應用程式反應良好，更節省開發時間以下範例使用 Cargo 頁面執行此操作：
程式碼
在以下範例中，.bpdpCardWrapper 是名為 bpdpSection 的父項容器。
如果容器 bpdpSection 的寬度下限為 744 像素，系統會更新 .bpdpCardContainer 和 .subTxt, .bpdpAddress 所選元件的 font-size 和 line-height。
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
影響
| 變更前 (多個程式碼集) | 變更後 (單一程式碼集) | |
|---|---|---|
| 基礎架構 | 獨立的基礎架構 (費用高昂)。 | 相同的基礎架構 (降低成本)。 |
| 設計 | 獨立使用者介面，但一致性不佳。 | 儘管有挑戰性的解決，卻有可能。 |
| 效能 | 系統容易管理，因為系統分離，但會重複提升效能。 | 這是專門說明網頁和功能的特定網頁，但是 redBus PageSpeedInsights 的分數高於 80。 |
| 開發 | 獨立開發團隊。 | 時間減少 30% - 40%。 |
Tokopedia
Tokopedia 的產品詳細資料頁面 (PDP) 包含多個分頁，分別提供商店和產品資訊。先前，此頁面的版面配置分為三個資料欄，有時如果螢幕尺寸較小，左側的產品名稱會遭到截斷 (請觀看後續的「之前」影片)。
為解決這個版面配置問題，開發人員可以輕鬆快速地採用容器查詢。完成這項實作後，他們能夠提供彈性的版面配置，讓產品名稱一律完整顯示 (請觀看後續的「使用後」影片)。
完成前
更新後
程式碼
下列程式碼會查詢名為 infowrapper 的父項容器的大小。如果 infowrapper 的寬度上限為 360 像素，系統會調整子項元件的 width、margin, 和 padding。
將 container-type 設為 inline-size，會查詢父項的內嵌方向大小。在英文等拉丁語言中，這是父項容器的寬度，因為文字會由左至右內嵌。
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
使用容器查詢的注意事項
Tokopedia 會在自家網站上尋找刪節號，藉此找到該公司的使用情境。 這表示容器可能過小，導致內容無法向使用者顯示。
針對電子商務網站執行容器查詢的另一個理想用途是找出重複使用的元件。舉例來說，「Add to cart」按鈕的顯示方式會因父項容器而異 (舉例來說，只有在產品資訊卡位於產品資訊卡時，才會看到圖示和文字圖示，如果圖示是網頁上的主要行動號召)。這個按鈕可能適合執行容器查詢。
你可以選擇改善網站。例如，您可以先從 Tokopedia 的 Ellipse 範例等較小的用途開始著手，然後在該處實作容器查詢。接著，逐步找出更多案例，並改善 CSS。
資源：
- 在穩定版瀏覽器中發生容器查詢
- 在瀏覽器中設計容器查詢
- 容器查詢示範
- 示範：容器查詢資訊卡
- 影片：網頁版 UI 新功能 - 2023 年 I/O 大會
- 您要回報錯誤或提出新功能建議嗎？我們想聽聽您的看法。
請瀏覽本系列的其他文章，瞭解使用新的 CSS 和 UI 功能 (例如捲動式動畫、彈出式視窗、容器查詢和 has() 選取器) 可帶來哪些益處的電子商務公司。