CSS min() max() clamp()
CSS 前端工程

CSS Comparison Functions:min(), max(), and clamp()

隨著回應式網頁的普及,各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼,更因為可以內嵌運算式,加上 CSS 目前是朝原生參數化的方向在走,在實際使用上可以有更多的想像和寫法。

min(), max(), clamp() 的官方文件在這裡
https://www.w3.org/TR/css-values-4/#comp-func

這份官方文件是 “CSS Values and Units Module Level 4″,狀態是 WD (Working Draft)。對 CSS 演進方式,和成熟過程不熟的朋友,可以參考我之前的文章 CSS 的演進方式

有個觀察點滿有趣的,WD 是四個成熟過程中最低的,也就是最不成熟的,但現在主要瀏覽器都已實作 min(), max(), clamp()。所以讀者在看一個 CSS 和它的官方文件時,該文件的成熟狀態並不代表某個 CSS 的瀏覽器支援度。

這份文件的第 11 章是 “Mathematical Expressions”

  • 11.1 Basic Arithmetic: calc()
  • 11.2 Comparison Functions: min(), max(), and clamp()
  • 11.3 Stepped Value Functions
  • 11.4 …

大概架構是這樣。calc() 大家都熟悉,瀏覽器也都支援。再來是 min(), max(), and clamp(),是本篇要聊的。11.3 之後就有很大的瀏覽器支援度問題了,可能也就是這份文件,以整份文件而言是 WD 狀態的原因。

回到 min(), max(), clamp(),我們先看 min(), max(),都是在多個參數裡,取出最小 / 最大值,例如

width: min(800px, 70%, 50vw);

隨著瀏覽器大小,70% 跟 50vw 是動態的,min() 也會動態的取三個數值的最小值。當然,如果是 max() 就是取最大值。再來,min(), max() 可以在參數裡加運算式

width: min(calc(50% - 20px), 100px);
width: min(50% - 20px, 100px);  // 效果與上一行同, 可以拿掉 calc

還有一個滿常見的用法是,元素的寬度隨容器寬度比例,但不希望元素太寬,可能會這樣寫

width: 80%;
max-width: 600px;
//====== 下面一行可以取代上面兩行 =======
width: min(80%, 600px);

同理,如果希望元素的寬度隨容器寬度比例,但不希望容器縮小時元素太小,可以這樣寫

width: 20%;
min-width: 100px;
//====== 下面一行可以取代上面兩行 =======
width: max(20%, 100px);

clamp() 則是吃三個參數,依序是最小值,動態值,最大值。如果當下最小值 < 動態值 < 最大值,return 動態值。如果當下動態值 < 最小值,return 最小值。如果當下最大值 < 動態值,return 最大值。

width: clamp(100px, 30%, 500px);
width: clamp(100px, 30% - 10px, 500px); // 也可以吃運算式

接下來就是 clamp() 最厲害的應用:用它來設定 font size。傳統製作回應式網頁時,是用 media query 來設定 font size。例如螢幕寬度 300px~500px,font-size: 12px; 螢幕寬度 500px~800px,font-size: 14px; …等。但如果用 clamp() 設定 font size,一行解決,而且是「真回應式」

font-size: clamp(1rem, 1vw + 0.5rem, 3rem);

結論

min(), max(), clamp() 這 3 個 function 基本上可以應用在

  1. 控制元素本身的寬 / 高
  2. 控制元素間的 padding, margin
  3. 最有用的是,用 clamp() 設定 font size

而且這 3 個 function 沒有瀏覽器支援度的問題,是可以實際使用在專案的語法。需要寫前端的讀者可以參考看看。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。