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

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

一、IE8 之前（2012前）

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

在這個(gè)時(shí)代，只有rgb，沒(méi)有rgba，也就是這種最原始的寫(xiě)法。

rgb(255,0,0)

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

兼容性如下，全兼容。

二、IE9 ~ Safari 12（2019前）

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

rgba(255,0,0,.5)

這個(gè)階段應(yīng)該是目前絕大多數(shù)前端開(kāi)發(fā)都經(jīng)歷的時(shí)期，由于這段時(shí)期，JS框架發(fā)展迅猛，導(dǎo)致很多同學(xué)誤以為CSS 顏色就到此為止了，反正平時(shí)的開(kāi)發(fā)也夠用。

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

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

還有為啥是 Safari 12呢？因?yàn)閺腟afari 12.1開(kāi)始支持新的rgb顏色，并且是主流瀏覽器中支持最晚的。

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

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

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

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

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

由于 CSS極其強(qiáng)大的向后兼容性，因此也保留了以前逗號(hào)的寫(xiě)法。

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

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

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

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

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

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

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

還支持一個(gè)關(guān)鍵詞none，也就是0，幾乎沒(méi)啥用。

rgb(255 0 0 / none)

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

沒(méi)錯(cuò)，現(xiàn)在 rgba() 語(yǔ)法相當(dāng)于是 rgb() 的別稱，完全是一模一樣的，寫(xiě)不寫(xiě)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還有點(diǎn)不放心。

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

四、簡(jiǎn)單測(cè)試一下

第一題，請(qǐng)問(wèn)下面哪些顏色是合法的？

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。

答案解析：

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

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

然后逗號(hào)和/不能混用，所以E不合法。

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

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

第二題，請(qǐng)問(wèn)下面哪些顏色是CSS color 4新語(yǔ)法？(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%)

思考幾分鐘...

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

答案解析：

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

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

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

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

其他就都是舊語(yǔ)法了。

怎么樣，你答對(duì)了嗎？

五、實(shí)際開(kāi)發(fā)需要注意的

實(shí)際開(kāi)發(fā)中，我相信絕大部分同學(xué)都會(huì)穩(wěn)妥起見(jiàn)（可能是不知道有新語(yǔ)法），使用舊語(yǔ)法。

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

大部分設(shè)計(jì)軟件展示的也是這類舊語(yǔ)法，比如下面的 Figma。

正常情況下本來(lái)沒(méi)什么事，用這些舊語(yǔ)法也滿足需求。但有時(shí)候，一些 eslint 在不配置的情況下可能會(huì)自作主張的給你轉(zhuǎn)換了（在 git 提交的時(shí)候轉(zhuǎn)換），比如明明寫(xiě)的是 rgba 語(yǔ)法，結(jié)果被轉(zhuǎn)成了 rgb。

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

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

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

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

當(dāng)然這些 eslint 都是可以配置的，比如上面的這些問(wèn)題可以用這樣的配置來(lái)解決。

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

但是，對(duì)于不熟悉這些配置的（比如我）簡(jiǎn)直就是災(zāi)難！??

六、最后總結(jié)一下

以上就是本文的全部?jī)?nèi)容了，相信大家對(duì) rgb 顏色的發(fā)展以及兼容性有了一定的印象，下面總結(jié)一下

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

可能你根本不會(huì)去使用這些新語(yǔ)法，但是如果你在項(xiàng)目中碰到一些顏色丟失的問(wèn)題，可以朝這個(gè)方向來(lái)排查。