CSS 的演變歷程，Mask & Clip

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

關於 CSS mask & clip 相關，queue 好久了一直沒寫。在了解 CSS mask & clip 之前，larry 覺得可以先了解一下 CSS 的歷史。

https://developer.mozilla.org/zh-TW/docs/Glossary/W3C
首先，W3C 的每個標準都會有四個成熟過程 (stages of maturity)：

工作草案（Working Draft、WD）
候選推薦標準（Candidate Recommendation、CR）
提案推薦標準（Proposed Recommendation、PR）
W3C 推薦標準（W3C Recommendation、REC）

包含 CSS 規格文件也是用這四個文件狀態。另外，CSS 這個語言的演進，是用 “level” 多少來當單位, 例如

CSS 2.1 的全稱為 CSS level 2 revision 1
CSS 3 的全稱為 CSS level 3

就這幾十年的軟體發展來說，CSS 其實是一個相對年輕的語言。即使是算舊的 CSS 2.1，也是 2011 年 6 月才成為正式規格。
https://en.wikipedia.org/wiki/Cascading_Style_Sheets

“CSS 2.1 went to Proposed Recommendation on 12 April 2011. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation on 7 June 2011.”

接下來進到 CSS 3, 上面 wiki 提到

“Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called “modules”.

與 CSS 2 不同，CSS 3 不是用一大張文件來定義所有的規格，而是將不同的功能用不同文件定義，每個文件稱之為 “module” (所以 CSS 3 是由很多 module 所組成)。

這樣就有趣了，還記得上方 W3C 的四個文件狀態 (WD，CR，PR，REC)， CSS 3 的每個 module 有自己的文件狀態。(所以似乎也沒辦法定義 CSS 3 到底完成了沒 🙂

而且因為已經分 module 了，每個 module 自己提案、演進，所以也無法定義何謂 CSS 4。

Mask & Clip

回到 CSS mask & clip，主要規格文件是 CSS Masking Module Level 1 https://www.w3.org/TR/css-masking-1/

這邊附註一下，根據 W3C的文件

“When a new technology is added to CSS that is not an extension of something in an earlier CSS specification, it is published in a module that includes the indication ‘level 1’

新技術加入 CSS 時都是從 Level 1 開始，例如 Flexbox、CSS Grid 都是。但只要是模組化的文件，就算是 CSS 3。

回到上面的 CSS Masking Module Level 1，它還在 CR 階段，還沒到正式規格，這也說明了為什麼很多瀏覽器只是 partial support。

了解了以上背景之後，我們來看 mask & clip 用法本身。HTML5 Rocks 有一篇很好的文章 https://www.html5rocks.com/en/tutorials/masking/adobe/

Clip & Clip Path

HTML5 Rocks 文章提到 CSS 2.1 就有 clip 這寫法了，但上面 CSS Masking Module Level 1 文件提到 clip is deprecated，取而代之的是 clip-path。

clip-path 的用法如上面 HTML5 Rocks 文章，在 SVG 裡宣告一個 <clipPath>，裡面畫你想要的形狀，將它的 id 當成參數餵給 clip-path，這樣有 clip-path CSS 的元件就會被 <clipPath> 給 mask。沒錯，它雖然是叫 clip-path，但其實就是在做一個 mask 的動作。

使用上如果你想要在元件的邊緣加上一點不規則形狀，或是你想要做一個非矩形的元件 (基本上 html 元件都是矩形)，可以考慮用 clip-path。

Mask

mask 的寫法上有兩種方式，第一，類似 CSS background image：

mask-image
mask-repeat
mask-position
mask-clip
mask-origin
mask-size

mask-image 可以使用一般圖檔，如 jpg, png, svg。與 background image 不同的是，mask source 可以有多個，如同濾鏡 (filter) 的概念，一層一層疊上去就是了。第二個寫法就是直接用 mask, 與 background 同，是一種縮寫。

HTML5 Rocks 文章最後介紹一個 mask-border，larry 認為還是用 clip-path 來取代吧。連 mask 跟 clip-path 都要查一下瀏覽器支援度了，何況是 mask-border。

結論

CSS 的 clip-path 倒比較像是我們一般口語說的 mask，CSS mask 比較像是我們一般口語說的 filter，這是理解上需要注意的地方。最後記得 CSS Masking Module Level 1 仍然是 CR 狀態，要使用 clip 或 mask 時記得查一下瀏覽器支援度。