提到顏色，大家都能想到 rgb 顏色表示法，比如 rgb(255,0,0)就表示紅色，如果希望有透明度，可以用rgba來表示，比如rgba(255,0,0,.5)就表示透明度為50%的紅色。

除了這些，你還知道哪些？還有哪些新的寫法，兼容性如何？今天一起來聊聊 rgb 和 rgba 的發(fā)展史。

一、IE8 之前（2012前）

我最早工作是需要兼容 IE6 的，所以對這塊還算熟悉。

在這個時代，只有rgb，沒有rgba，也就是這種最原始的寫法。

rgb(255,0,0)

因此如果要實現透明度顏色，要么整體透明，要么切圖，是一件非常頭疼的事。

兼容性如下，全兼容。

二、IE9 ~ Safari 12（2019前）

為了解決透明度的問題，從 IE9 開始支持rgba顏色表示法，這里的a就是alpha，也就是透明的意思。

rgba(255,0,0,.5)

這個階段應該是目前絕大多數前端開發(fā)都經歷的時期，由于這段時期，JS框架發(fā)展迅猛，導致很多同學誤以為CSS 顏色就到此為止了，反正平時的開發(fā)也夠用。

需要注意的是，rgba這里的透明度是必須的，即使是1也要寫上。

/*舊瀏覽器不支持*/
rgba(255,0,0) 
/*正確的寫法*/
rgba(255,0,0,1)

還有為啥是 Safari 12呢？因為從Safari 12.1開始支持新的rgb顏色，并且是主流瀏覽器中支持最晚的。

兼容性如下，IE9 以上全兼容。

三、Safari 12.1 ~ 至今（2019以后）

接下來就是 CSS Color Level 4 的更新，顏色表示變得極其自由，非常離譜，也是大多數同學沒有注意到的一次變革。

最大的特征是去除了逗號，改用空格作為分隔符，還支持透明度可選，如果有透明度，就用斜杠/來區(qū)分。

rgb(255 0 0)
rgb(255 0 0 / .5)

由于 CSS極其強大的向后兼容性，因此也保留了以前逗號的寫法。

rgb(255,0,0)
rgb(255,0,0,.5)

另外，還有一點比較隱晦，就是透明度alpha還支持了百分比格式，注意是「透明度」，其他值舊語法就支持。

rgb(255 0 0 / 50%)
rgb(100% 0% 0% / 50%)

注意，這里的0必須也寫成0%，也就是r、g、b的形式必須統一，要么都是數值，要么都是百分比，但是和透明度可以不一致，例如：

/*以下合法*/
rgb(100% 0% 0% / .5)
rgb(255 0 0 / 50%)

更夸張的是，當用百分比表示時，空格也是可以省略的（當然并不推薦）。

rgb(100%0%0%/50%)

還支持一個關鍵詞none，也就是0，幾乎沒啥用。

rgb(255 0 0 / none)

有人可能覺得奇怪，既然rgb也支持透明度了，那rgba干嘛去了？

沒錯，現在 rgba() 語法相當于是 rgb() 的別稱，完全是一模一樣的，寫不寫a都一樣。

rgba(255 255 255)
rgba(255 255 255 / .5)
rgba(255,0,0)
rgba(255,0,0,.5)
rgba(100% 0% 0%)
rgba(100% 0% 0% / 50%)
rgba(100% 0% 0% / .5)
rgba(255 0 0 / 50%)

兼容性如下，主要是 safari 12.1還有點不放心。

怎么樣，是不是都記住了？下面來看兩道選擇題

四、簡單測試一下

第一題，請問下面哪些顏色是合法的？

A. rgb(255, 0, 0, 2)
B. rgb(255, 0, 0, -1)
C. rgb(300, 0, 0, 1)
D. rgb(100%, 0, 0, 1)
E. rgb(255, 0, 0 / 100%)
F. rgba(100%0%0%)
G. rgba(255 0 0 1)

思考幾分鐘...

答案揭曉：合法的是A、B、C、F。

答案解析：

首先關于閾值，顏色處理非常靈活，比如透明度超過1就解析成1，小于0就解析成0，所以 A、B、C都是合法的。

其次，百分比和數值不能混用，所以D不合法。

然后逗號和/不能混用，所以E不合法。

接著，用百分比表示時可以省略空格，所以F合法。

最后，用空格分隔時，透明度需要用/區(qū)分，所以G不合法。

第二題，請問下面哪些顏色是CSS color 4新語法？(safari 12.1+支持)。

A. rgba(255, 0, 0，50%)
B. rgba(100%, 0%, 0%, 50%)
C. rgba(100%, 0%, 0%, .5)
D. rgba(255, 0, 0)
E. rgb(255 0 0)
F. rgb(300, 0, 0, 1)
G. rgb(100%, 0%, 0%)

思考幾分鐘...

答案揭曉：屬于新語法的是A、B、D、E、F。

答案解析：

首先來看 rgba，只要透明度是百分比格式的，都是新語法，所以 A、B符合。

然后在舊語法中，rgba 中的透明度是必須的，可以省略的就是新語法，所以 D 也是新語法。

接著，新語法才支持空格作為分隔符，所以 E 也是新語法。

rgb 支持透明度也是新語法，所以 F 也符合。

其他就都是舊語法了。

怎么樣，你答對了嗎？

五、實際開發(fā)需要注意的

實際開發(fā)中，我相信絕大部分同學都會穩(wěn)妥起見（可能是不知道有新語法），使用舊語法。

rgb(255,0,0)
rgba(255,0,0,0)

大部分設計軟件展示的也是這類舊語法，比如下面的 Figma。

正常情況下本來沒什么事，用這些舊語法也滿足需求。但有時候，一些 eslint 在不配置的情況下可能會自作主張的給你轉換了（在 git 提交的時候轉換），比如明明寫的是 rgba 語法，結果被轉成了 rgb。

rgba(255,0,0,0.5)
/*eslint轉換后*/
rgb(255 0 0 /50%)

這個還好，比較容易發(fā)現，還有一種就比較隱晦了，比如下面這種。

rgba(255,0,0,0.5)
/*eslint轉換后*/
rgba(255,0,0,50%)

僅僅是把透明度做了轉換，這是個新語法，但是很難被發(fā)現，結果就有可能在低版本 ios （safari 12以下）出現顏色丟失。

當然這些 eslint 都是可以配置的，比如上面的這些問題可以用這樣的配置來解決。

"color-function-notation": 'legacy',
"alpha-value-notation": 'number'

但是，對于不熟悉這些配置的（比如我）簡直就是災難！??

六、最后總結一下

以上就是本文的全部內容了，相信大家對 rgb 顏色的發(fā)展以及兼容性有了一定的印象，下面總結一下

• IE8之前只支持rgb顏色。
• IE9到 safari 12 期間支持了rgba顏色，注意此時的a是必須的。
• safari 12.1以上迎來了 CSS color 4顏色大變革，寫法極其自由。
• 最大的特征是去除了逗號，改用空格作為分隔符，還支持透明度可選。
• 為了向下兼容，也支持傳統逗號分隔。
• 透明度支持百分比，這個變化比較微妙，很容易被忽視。
• 其他細節(jié)可以查看以上兩道選擇題。
• 很多問題可能是工程化工具自動修改的，可能需要一定的配置來解決。

可能你根本不會去使用這些新語法，但是如果你在項目中碰到一些顏色丟失的問題，可以朝這個方向來排查。