Rethink RWD through CSS Container Queries

重新思考如何建構 RWD 網頁，透過 CSS Container Queries

#Container Queries

前言

一開始聽到 CSS Container Queries🔗 這個名詞還是在一兩年前，隨著時間演進建構網頁的模式也變動了許多次，我也越來越確信這項技術會是未來建構 RWD 網頁的一塊重要拼圖，文章將介紹現有的 Media Queries🔗 有哪些缺陷，新解方則具備哪些優勢？

Media Queries 與 Container Queries 差異

說到 RWD 應該都會聯想到 Media Queries 這項屬性，而新舊屬性兩者它們各自提供不同的解決方案通常用於解決 「UI 片段在不同裝置尺寸顯示的樣式切換」，舉例來說按照 Media Queries 來撰寫 RWD 的思維是：

希望當前裝置尺寸在 x 時採用 y 樣式。

我希望在小裝置上將選單收合，大裝置則展開（隱藏）
我希望在小裝置上顯示 1 列但在大裝置上顯示 3 列（改變布局）

可以留意到專注點都是在於觀察裝置尺寸的變化並套用不同的樣式，這樣製作 RWD 網頁的方式伴隨我們很長一段時間，但如果希望樣式變換發生在特定網頁元素上呢？就只透過裝置尺寸來改變樣式，彈性就顯得不足。

隨著網頁元件化的發展，我們傾向建構網頁元件並彈性適應各種裝置尺寸而不再像早期 AWD 強調針對特定裝置提供特定的設計🔗，這也是為什麼已經有了 Media Queries 卻還需要再推出 Container Queries 的原因——「觀察特定元網頁元素的變化並套用不同的樣式」，也就是：

x 元素在 y 尺寸時採用 z 樣式。

如何使用 Container Queries

有了 Container Queries，開發者們能夠真正的針對網個別網頁元素制定樣式，它提供更高的彈性去選擇要觀察的元素尺寸並在達成條件時套用樣式。

首先，需要定義一個非 inline 的元素作為「容器」，默認情況下，沒有任何元素是容器，這樣才就可以控制哪個元素是「容器」。

`inline-size` vs `size`

當你定義一個容器上下文時，會使用 container-type 屬性並給它一個 inline-size 或 size 的值。這個屬性的默認值是 normal，也可以被設置以便在需要時取消容器。

inline-size：容器的寬由容器決定、高度由內容決定。
block-size：容器的高與寬都由容器決定，如果沒有設置則會退回預設為 0。

大多時候指定容器的高並沒有意義，因為容器的高度通常是由內容來決定的，所以絕大多數只會使用到 inline-size 屬性設置容器。

.container-element {
  container-type: inline-size;
}

默認使用

一旦設置了容器，就可以在容器內的任何元素上使用新的 @container。

@container (min-width: 30em) {
  .child-element {
    font-size: 1rem;
  }
}

命名容器

如果有很多容器，賦予它們名稱是一個明確指定容器的好方法。雖然不是絕對必要的，因為它會默認目標最近的父容器。

.container-element {
  container-name: card;
  container-type: inline-size;

  /* 簡寫如下 */
  container: card / inline-size;
}

你可以在查詢中直接引用命名的 Container Queries。

@container card (min-width: 50em) {
  .child-element {
    font-size: 1rem;
  }
}

容器查詢長度單位

在容器內可以使用 Container Query Length Unit🔗 來取得容器相關的資訊，例如說容器的寬高。

cqw🔗: 1% Query Container 的寬
cqh🔗: 1% Query Container 的高
cqi🔗: 1% Query Container 的 inline 大小
cqb🔗: 1% Query Container 的 block 大小
cqmin🔗: 容器的行內尺寸（inline size）或塊尺寸（block size）中較小值的 1%
cqmax🔗: 容器的行內尺寸（inline size）或塊尺寸（block size）中較大值的 1%

Container Queries 不會取代 Media Queries

既然 Container Queries 可以更為彈性的選擇網頁中的元素那還有什麼理由去使用 Media Queries 呢？其實這兩者並不是取代而是互補的關係，在某些場合下你還是會需要根據裝置尺寸來調整樣式，舉例來說：透過 Media Queries 調整整體網頁中的變數。像是以下示範使用 Media Queries 改變全域 CSS 變數，除了顏色外也有許多可能性：字體大小、間距……等與裝置尺寸緊密關聯的樣式。

:root {
  --bg-color: red;
}

@media (800px < width) {
  :root {
    --bg-color: green;
  }
}

總結

Media Queries：易於指定整體頁面樣式
Container Queries：易於指定個別元素在不同尺寸時的樣式

大力的推薦 Ahmad Shadeed 的文章：An Interactive Guide to CSS Container Queries🔗 有互動式的教學範例與所有常見的 Container Queries 應用場景。