Mate60手機(jī)殼曝光 致敬自己的經(jīng)典設(shè)計(jì)
8月3日消息，今天下午博主數(shù)碼閑聊站帶來了華為Mate60的第三方手機(jī)殼圖，可以讓我們在真機(jī)發(fā)布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
提到顏色，大家都能想到 rgb 顏色表示法，比如 rgb(255,0,0)就表示紅色，如果希望有透明度，可以用rgba來表示，比如rgba(255,0,0,.5)就表示透明度為50%的紅色。
除了這些，你還知道哪些？還有哪些新的寫法，兼容性如何？今天一起來聊聊 rgb 和 rgba 的發(fā)展史。
我最早工作是需要兼容 IE6 的，所以對這塊還算熟悉。
在這個(gè)時(shí)代，只有rgb，沒有rgba，也就是這種最原始的寫法。
rgb(255,0,0)因此如果要實(shí)現(xiàn)透明度顏色，要么整體透明，要么切圖，是一件非常頭疼的事。
兼容性如下，全兼容。
為了解決透明度的問題，從 IE9 開始支持rgba顏色表示法，這里的a就是alpha，也就是透明的意思。
rgba(255,0,0,.5)這個(gè)階段應(yīng)該是目前絕大多數(shù)前端開發(fā)都經(jīng)歷的時(shí)期，由于這段時(shí)期，JS框架發(fā)展迅猛，導(dǎo)致很多同學(xué)誤以為CSS 顏色就到此為止了，反正平時(shí)的開發(fā)也夠用。
需要注意的是，rgba這里的透明度是必須的，即使是1也要寫上。
/*舊瀏覽器不支持*/rgba(255,0,0) /*正確的寫法*/rgba(255,0,0,1)還有為啥是 Safari 12呢？因?yàn)閺腟afari 12.1開始支持新的rgb顏色，并且是主流瀏覽器中支持最晚的。
兼容性如下，IE9 以上全兼容。
接下來就是 CSS Color Level 4 的更新，顏色表示變得極其自由，非常離譜，也是大多數(shù)同學(xué)沒有注意到的一次變革。
最大的特征是去除了逗號，改用空格作為分隔符，還支持透明度可選，如果有透明度，就用斜杠/來區(qū)分。
rgb(255 0 0)rgb(255 0 0 / .5)由于 CSS極其強(qiáng)大的向后兼容性，因此也保留了以前逗號的寫法。
rgb(255,0,0)rgb(255,0,0,.5)另外，還有一點(diǎn)比較隱晦，就是透明度alpha還支持了百分比格式，注意是「透明度」，其他值舊語法就支持。
rgb(255 0 0 / 50%)rgb(100% 0% 0% / 50%)注意，這里的0必須也寫成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，幾乎沒啥用。
rgb(255 0 0 / none)有人可能覺得奇怪，既然rgb也支持透明度了，那rgba干嘛去了？
沒錯(cuò)，現(xiàn)在 rgba() 語法相當(dāng)于是 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還有點(diǎ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)于閾值，顏色處理非常靈活，比如透明度超過1就解析成1，小于0就解析成0，所以 A、B、C都是合法的。
其次，百分比和數(shù)值不能混用，所以D不合法。
然后逗號和/不能混用，所以E不合法。
接著，用百分比表示時(shí)可以省略空格，所以F合法。
最后，用空格分隔時(shí)，透明度需要用/區(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 也符合。
其他就都是舊語法了。
怎么樣，你答對了嗎？
實(shí)際開發(fā)中，我相信絕大部分同學(xué)都會穩(wěn)妥起見（可能是不知道有新語法），使用舊語法。
rgb(255,0,0)rgba(255,0,0,0)大部分設(shè)計(jì)軟件展示的也是這類舊語法，比如下面的 Figma。
正常情況下本來沒什么事，用這些舊語法也滿足需求。但有時(shí)候，一些 eslint 在不配置的情況下可能會自作主張的給你轉(zhuǎn)換了（在 git 提交的時(shí)候轉(zhuǎn)換），比如明明寫的是 rgba 語法，結(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è)新語法，但是很難被發(fā)現(xiàn)，結(jié)果就有可能在低版本 ios （safari 12以下）出現(xiàn)顏色丟失。
當(dāng)然這些 eslint 都是可以配置的，比如上面的這些問題可以用這樣的配置來解決。
"color-function-notation": 'legacy',"alpha-value-notation": 'number'但是，對于不熟悉這些配置的（比如我）簡直就是災(zāi)難！
本文鏈接：http://www.tebozhan.com/showinfo-26-34639-0.htmlCSS 中 Rgb 與 Rgba 的進(jìn)化史
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號