容器查詢徹底改變了開發人員採用自適應設計的方式,Netflix 團隊也親身體驗到這項技術對簡化開發流程、提升彈性和效能所帶來的深遠影響。這篇文章將說明使用容器查詢的關鍵優點,並與舊版方法進行比較,特別是那些仰賴 JavaScript 進行版面配置控管的方法。其中包含程式碼範例,說明各個要點,並說明容器查詢如何讓開發人員的工作更加輕鬆。
1. 簡化的元件設計,從「自底向上」與「自上而下」
Netflix 團隊經歷的重大轉變之一,就是從「自上而下」的設計方法,轉變為「自下而上」的設計方法。在容器查詢之前,父項容器必須完全瞭解子項的版面配置需求。使用容器查詢時,這個邏輯會反轉,讓子項元件可根據自身容器的大小控管版面配置。這麼做可簡化父項的角色,並減少程式碼中的版面配置邏輯數量。
範例:容器查詢與媒體查詢和 JavaScript
變更前 (需要使用 JavaScript):
/* Layout with media queries */
.card {
width: 100%;
}
@media (min-width: 600px) {
.card {
width: 50%;
}
}
@media (min-width: 900px) {
.card {
width: 33.33%;
}
}
// JavaScript to detect parent container size
const container = document.querySelector('.container');
const card = document.querySelector('.card');
function adjustLayout() {
if (window.innerWidth >= 900) {
card.style.width = '33.33%';
} else if (window.innerWidth >= 600) {
card.style.width = '50%';
} else {
card.style.width = '100%';
}
}
window.addEventListener('resize', adjustLayout);
adjustLayout();
變更後:
/* Container Query */
.container {
container-type: inline-size;
}
.card {
width: 100%;
}
@container (min-width: 600px) {
.card {
width: 50%;
}
}
@container (min-width: 900px) {
.card {
width: 33.33%;
}
}
本範例說明父項容器如何不再需要管理子項版面配置。@container
規則可讓 .card
回應其直接容器的大小,簡化版面配置邏輯,並完全不需要 JavaScript。
2. 不使用複雜媒體查詢的回應式設計
Netflix 團隊發現容器查詢可簡化回應式設計,特別是行動優先設計。您可以建立可重複使用的元件,讓元件根據容器大小進行調整,而無需編寫複雜的媒體查詢,這樣就能在各種螢幕大小和裝置上提供動態版面配置。這對於 Netflix 等行動流量占比高的應用程式特別實用。
範例:使用容器查詢的元件回應速度
變更前:
/* Desktop versus Mobile
this only works if.sidebar is directly contained by a viewport-width element */
.sidebar {
width: 300px;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}
變更後:
/* Responsive sidebar based on container,
.sidebar can be placed in any element of any width */
.container {
container-type: inline-size;
}
.sidebar {
width: 100%;
}
@container (min-width: 768px) {
.sidebar {
width: 300px;
}
}
.sidebar
不再依賴以檢視區為基礎的媒體查詢,而是會回應容器大小,讓它能更自然地調整動態版面配置,而無須知道檢視區或父項容器的大小。
3. 減少對 JavaScript 的依附元件,以便管理版面配置
在容器查詢問世之前,許多團隊 (包括 Netflix) 都必須依賴 JavaScript 來處理動態版面配置。透過查詢視窗大小,JavaScript 會觸發版面配置變更,進而增加複雜度和潛在錯誤。容器查詢可讓 CSS 根據容器大小處理版面配置回應性,因此不必再進行這項操作。
範例:移除以 JavaScript 為基礎的版面配置邏輯
變更前:
const cardContainer = document.querySelector('.card-container');
const cards = cardContainer.children;
function adjustLayout() {
if (cardContainer.offsetWidth > 900) {
cards.forEach(card => card.style.width = '33.33%');
} else if (cardContainer.offsetWidth > 600) {
cards.forEach(card => card.style.width = '50%');
} else {
cards.forEach(card => card.style.width = '100%');
}
}
window.addEventListener('resize', adjustLayout);
adjustLayout();
變更後:
.card-container {
container-type: inline-size;
}
.card {
width: 100%;
}
@container (min-width: 600px) {
.card {
width: 50%;
}
}
@container (min-width: 900px) {
.card {
width: 33.33%;
}
}
這種做法不僅可減少所需的 JavaScript 用量,還能避免執行階段計算,進而提升效能。
4. 程式碼更少,錯誤也更少
Netflix 團隊發現,使用容器查詢後,程式碼行數和版面配置相關錯誤都減少了。將版面配置邏輯從 JavaScript 移至 CSS,並省去複雜的媒體查詢,開發人員就能編寫更易於維護的程式碼。
範例:減少版面配置程式碼
Netflix 團隊觀察到,採用容器查詢後,CSS 程式碼大幅減少,某些元件的程式碼減少幅度甚至高達 30%。同時,團隊也能透過移除控制子項元件的邏輯,簡化許多複雜且有時容易發生衝突的媒體查詢,進而達到更高程度的關注點分離。這麼做不僅可加快開發速度,還能將潛在故障點降至最低,進而減少錯誤。
變更前:
/* Before with complex media queries */
.card {
width: 100%;
}
@media (min-width: 600px) {
.card {
width: 50%;
}
}
@media (min-width: 900px) {
.card {
width: 33.33%;
}
}
變更後
.container {
container-type: inline-size;
}
.card {
width: 100%;
}
@container (min-width: 600px) {
.card {
width: 50%;
}
}
@container (min-width: 900px) {
.card {
width: 33.33%;
}
}
5. 改善開發人員體驗
bq。「這讓我的生活變得更輕鬆」
容器查詢最不為人知的好處之一,或許就是能改善開發人員體驗。讓 CSS 以更直覺、以元件為重點的方式運作,開發人員就能專注於建構可重複使用且具彈性的元件,不必擔心元件會在每種可能的版面配置情境中如何運作。
正如 Netflix 團隊的一位成員所說:「這就是 CSS 一開始應該要運作的方式。」
6. 聚酯纖維備用
雖然容器查詢現在已在所有主要瀏覽器中提供,但仍有使用舊版瀏覽器的疑慮。備用方案非常重要,Netflix 團隊使用的是網路社群貢獻者所建立的 JavaScript polyfill。實作方式很簡單,只要使用功能偵測功能即可:
if (! CSS.supports("container-type:size")) {
/*use polyfill from
https://www.npmjs.com/package/container-query-polyfill */
}
結論
容器查詢是 CSS 的重大進展,可讓開發人員更輕鬆地建構靈活的回應式元件,並在網站的不同部分重複使用。這些元素可減少對 JavaScript 的版面配置依賴、消除複雜的媒體查詢,並加快開發作業,因此在效能和可維護性方面具有顯著優勢。目前,大多數的用途都位於 Netflix 的 Tudum 頁面上,並且可能會在 Netflix 的其他部分使用容器查詢。Netflix 團隊認為容器查詢是開發人員工具箱中的重要工具,隨著越來越多開發人員接受容器查詢帶來的彈性和效能,這項工具的使用率也會隨之增加。無論是改造現有元件,還是設計全新元件,容器查詢都能為回應式設計提供更簡單、更清晰的途徑。
如果您還沒嘗試過容器查詢,不妨試試看,您可能會發現,容器查詢可以意想不到的方式簡化工作流程。