對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
提到顏色，大家都能想到 rgb 顏色表示法，比如 rgb(255,0,0)就表示紅色，如果希望有透明度，可以用rgba來表示，比如rgba(255,0,0,.5)就表示透明度為50%的紅色。
除了這些，你還知道哪些？還有哪些新的寫法，兼容性如何？今天一起來聊聊 rgb 和 rgba 的發展史。
我最早工作是需要兼容 IE6 的，所以對這塊還算熟悉。
在這個時代，只有rgb，沒有rgba，也就是這種最原始的寫法。
rgb(255,0,0)因此如果要實現透明度顏色，要么整體透明，要么切圖，是一件非常頭疼的事。
兼容性如下，全兼容。
為了解決透明度的問題，從 IE9 開始支持rgba顏色表示法，這里的a就是alpha，也就是透明的意思。
rgba(255,0,0,.5)這個階段應該是目前絕大多數前端開發都經歷的時期，由于這段時期，JS框架發展迅猛，導致很多同學誤以為CSS 顏色就到此為止了，反正平時的開發也夠用。
需要注意的是，rgba這里的透明度是必須的，即使是1也要寫上。
/*舊瀏覽器不支持*/rgba(255,0,0) /*正確的寫法*/rgba(255,0,0,1)還有為啥是 Safari 12呢？因為從Safari 12.1開始支持新的rgb顏色，并且是主流瀏覽器中支持最晚的。
兼容性如下，IE9 以上全兼容。
接下來就是 CSS Color Level 4 的更新，顏色表示變得極其自由，非常離譜，也是大多數同學沒有注意到的一次變革。
最大的特征是去除了逗號，改用空格作為分隔符，還支持透明度可選，如果有透明度，就用斜杠/來區分。
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合法。
最后，用空格分隔時，透明度需要用/區分，所以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 也符合。
其他就都是舊語法了。
怎么樣，你答對了嗎？
實際開發中，我相信絕大部分同學都會穩妥起見（可能是不知道有新語法），使用舊語法。
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%)這個還好，比較容易發現，還有一種就比較隱晦了，比如下面這種。
rgba(255,0,0,0.5)/*eslint轉換后*/rgba(255,0,0,50%)僅僅是把透明度做了轉換，這是個新語法，但是很難被發現，結果就有可能在低版本 ios （safari 12以下）出現顏色丟失。
當然這些 eslint 都是可以配置的，比如上面的這些問題可以用這樣的配置來解決。
"color-function-notation": 'legacy',"alpha-value-notation": 'number'但是，對于不熟悉這些配置的（比如我）簡直就是災難！
本文鏈接：http://www.www897cc.com/showinfo-26-34639-0.htmlCSS 中 Rgb 與 Rgba 的進化史
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 程序員的創新思維：突破常規的思考方式
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號