源：進擊的Coder
今天是 2020 年 4 月 4 日，星期六，清明節(jié)。
我們的國家經(jīng)歷了非常慘痛的時刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保衛(wèi)人民的安危遇難，今天全國下降半旗，北京時間 10 點全國默哀三分鐘，來致敬英雄們。同時今天一切公共娛樂活動也都會停止，包括直播、綜藝、影視、游戲等等。
我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼，向所有在抗戰(zhàn)在疫情前線的工作和醫(yī)護人員致敬。我們每一個人的平安面前，都是英雄的人墻。
今天大家可以看到很多很多網(wǎng)站包括主頁和內(nèi)容也都已經(jīng)變成了灰色，比如百度、B 站、愛奇藝、CSDN 等等。
CSDN
愛奇藝
百度
大家可以看到全站的內(nèi)容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？
有人會以為所有的內(nèi)容都統(tǒng)一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。
其實，解決方案很簡單，只需要幾行代碼就能搞定了。
我們選擇一個網(wǎng)站，比如 B 站吧，打開瀏覽器開發(fā)者工具。
審查一下網(wǎng)頁的源代碼，我們可以發(fā)現(xiàn)在 html 的這個地方多了一個疑似的 class，叫做 gray，gray 中文即灰色。
變灰效果
其 CSS 內(nèi)容為：
html.gray {-webkit-filter: grayscale(.95);}我們將其取消，就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來了。
還原效果
果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節(jié)點之上的。
另外看看 CSDN，它也是用的這個 CSS 樣式，其內(nèi)容為：
html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}這個實現(xiàn)看起來兼容性會更好一些。
因此我們可以確定，通過一個全局的 CSS 樣式就能將整個網(wǎng)站變成灰色效果。
那么這里我們就來詳細了解一下這究竟是一個什么樣的 CSS 樣式。
這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。
官方介紹內(nèi)容如下：
filter CSS 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。
CSS 標(biāo)準(zhǔn)里包含了一些已實現(xiàn)預(yù)定義效果的函數(shù)。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。
其實就是一個濾鏡的意思。
官方有一個 Demo，可以看下效果，如圖所示。
Demo
比如這里通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
其所有用法示例如下：
/* URL to SVG filter */filter: url("filters.svg#filter-id");
/* <filter-function> values */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px16px20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);
/* Multiple filters */filter: contrast(175%) brightness(3%);
/* Global values */filter: inherit;filter: initial;filter: unset;各個用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
比如這里如果我們可以使用 blur 設(shè)置高斯模糊，用法如下：
filter: blur(radius)給圖像設(shè)置高斯模糊。radius 一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設(shè)定值，則默認(rèn)是 0；這個參數(shù)可設(shè)置絕對像素值，但不接受百分比值。
可以達成這樣的效果：
效果
再說回剛才的灰色圖像，這里其實就是設(shè)置了 grayscale，其用法如下：
filter: grayscale(percent)將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。percent 值為 100% 則完全轉(zhuǎn)為灰度圖像，值為 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是 0。另外除了傳遞百分比，還可以傳遞浮點數(shù)，效果是一樣的。
如：
filter: grayscale(1)filter: grayscale(100%)都可以將節(jié)點轉(zhuǎn)化為 100% 的灰度模式。
所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：
.gray {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}這樣想要變灰的節(jié)點只需要加上 gray 這個 class 就好了，比如加到 html 節(jié)點上就可以全站變灰了。
最后呢，看一下瀏覽器對 filter 這個樣式的兼容性怎樣，如圖所示：
兼容性
這里我們看到，這里除了 IE，其他的 PC、手機端的瀏覽器都支持了，F(xiàn)irefox 的 PC、安卓端還單獨對 SVG 圖像加了支持，可以放心使用。
本篇文章簡單介紹了一下今天觀察到的網(wǎng)站變灰的實現(xiàn)，也學(xué)習(xí)了 filter 的更詳細的用法，希望有幫助。
[1] SVG filter element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
最后，跟大家分享今天看到的，對我觸動頗深的一段話：
“如果有后人來撰寫今天的歷史，那他們將發(fā)現(xiàn)沒有任何文字詞藻能夠?qū)懕M這場災(zāi)難的殘酷，也沒有任何語言修辭能描述人類為生存所付出的艱苦卓絕的努力。
我們將懷揣火種走過黑暗長夜，跨過戰(zhàn)友的遺骸，踏過荊棘和深淵，最終在累累尸骨上重新點燃種族延續(xù)的火炬。
我知道你們并不需要歷史來記載功勛，也無謂那些空虛華美的稱頌。
只要山川河流、千萬英靈，見證過我們前仆后繼的跋涉和永不放棄的努力?！?/p>
—— 敬平凡的人類
緬懷逝者，致敬英雄
愿疫情早日結(jié)束，再無傷痛！
1月初，Google Chrome 97登陸穩(wěn)定頻道，帶來了大量的新功能，包括更新的鍵盤API，該API被蘋果和Mozilla駁回，因為它太容易侵犯用戶隱私了。經(jīng)過四周的開發(fā)周期，今天我們可以期待Chrome 98的發(fā)布，雖然它沒有那么多的爭議，但有一個功能“COLRv1”絕對是突出的，不僅如此它還引發(fā)了爭議。
Google Chrome 98增加了對COLRv1彩色漸變矢量字體的支持，這是其COLRv0的進化版。 它們以漸變、合成、變換、多色字母的形式帶來了更具表現(xiàn)力的視覺能力，甚至在非常小的字體尺寸下也是如此。Google對此介紹說，它能夠使用COLRv1字體格式渲染諾托彩色表情符號，經(jīng)過WOFF2壓縮后的大小為1.85MB。同時，對于同樣的表情符號，標(biāo)準(zhǔn)的位圖字體占用了9MB，在節(jié)省系統(tǒng)資源開銷上，這是個重大的改進。
與任何新的瀏覽器功能一樣，獲得其他網(wǎng)絡(luò)瀏覽器供應(yīng)商和網(wǎng)絡(luò)開發(fā)者的支持以確保無縫的交叉兼容是非常重要的。盡管Mozilla和網(wǎng)絡(luò)開發(fā)者已經(jīng)提到他們對新的矢量字體的支持，但蘋果的WebKit和Core Text團隊則反對該提議，他們反對COLRv1的理由如下：
它重新發(fā)明了車輪。這種新的格式與任何通用的2D圖形序列化格式一樣，具有很強的表現(xiàn)力和功能。現(xiàn)有的通用2D圖形的序列化格式有很多很多。
它還不存在于Chrome的開發(fā)者行列之外。OT-SVG同樣具有表達能力，存在并在DirectWrite、Core Text、Firefox和許多（大部分）Adobe創(chuàng)作應(yīng)用程序中擁有運輸實現(xiàn)。許多OT-SVG字體已經(jīng)存在。
因為這個建議在Chrome之外還不存在，所以在現(xiàn)有的創(chuàng)作工具中沒有生態(tài)系統(tǒng)。相反，許多設(shè)計創(chuàng)作工具已經(jīng)導(dǎo)出了SVG。
同時支持OT-SVG和這個新的提議是兩倍（-ish）的維護負擔(dān)，而這種格式并不比我們已經(jīng)支持的格式更具表現(xiàn)力。
同時支持OT-SVG和這個新提議會增加我們的二進制大小。我們預(yù)計額外的二進制大小的增加大致相當(dāng)于我們在實施 OT-SVG 后觀察到的二進制大小的增加。(OT-SVG 涉及到一個 XML 解析器，但是 WebKit 已經(jīng)與一個 XML 解析器關(guān)聯(lián)，所以預(yù)計這個新提議的大小與我們在實現(xiàn) OT-SVG 后看到的大小增加大致相等，而這個提議需要它自己的新型解析/溢出檢測/解釋代碼）。
同時支持OT-SVG和這個新提議，使基于矢量的彩色字體的安全攻擊的表面積增加了一倍。
即使考慮到一個只支持這個建議而不支持SVG的引擎，也沒有看到任何證據(jù)表明，與一個新的二進制格式相比，避免使用XML會減少安全漏洞。歷史上，在WebKit中，我們觀察到不透明的二進制格式（如圖像格式）有很多自己的安全漏洞。
這個規(guī)范有2500多行，規(guī)范的images/目錄有77個數(shù)字，而這個建議只有一個實現(xiàn)。它足夠復(fù)雜，以至于我們沒有信心它能夠被互操作地實現(xiàn)。我們擔(dān)心繪圖操作的行為可能是Skia特有的，而在Core Graphics上很難/不可能實現(xiàn)。例如，乍一看，我們不確定這個提案中的徑向梯度是否可以在Core Graphics上實現(xiàn)。據(jù)我們所知，這個建議并沒有經(jīng)過許多獨立的利益相關(guān)者的嚴(yán)格的標(biāo)準(zhǔn)化過程。
在彩色字體表格中嵌入光柵圖像數(shù)據(jù)在今天是很常見的，但是這個新的提議沒有允許這樣做的能力，盡管它的矢量設(shè)施與任何通用的2D圖形序列化格式一樣具有表現(xiàn)力。因此，它實際上并沒有改善彩色字體表碎片的情況，而這被廣泛認(rèn)為是當(dāng)今彩色字體的最大缺點之一。
不過，不管蘋果方面如何反對，COLRv1字體格式將首先在Chrome 98中得到支持。
除此以外，Chrome 98中還包括其他較小的改進和提高。用于密鑰交換的簡單數(shù)據(jù)加密標(biāo)準(zhǔn)（SDES）也正在被淘汰，因為它被稱為"歷史性的"，因此是一種安全風(fēng)險。
一個CSS媒體查詢也被提供給網(wǎng)頁開發(fā)人員，以便他們能夠自動檢測HDR顯示器并相應(yīng)地渲染他們的內(nèi)容。對于顏色調(diào)整，"only"關(guān)鍵字已被重新引入到CSS色彩模式規(guī)范中。
為了替代潛在的性能優(yōu)勢和對某些用例的簡易開發(fā)，正在為"ClipboardItem"對象添加對承諾的支持。此外，開發(fā)者還可以利用"self.structuredClone"方法來克隆和轉(zhuǎn)移對象。為了避免混淆并實現(xiàn)與標(biāo)準(zhǔn)規(guī)范的互操作性，一些用于窗口彈出的API也被改變。
流寫入現(xiàn)在可以立即被終止，跨源資源共享（CORS）預(yù)檢請求也可以發(fā)送到私人網(wǎng)絡(luò)上的目標(biāo)服務(wù)器，在訪問子資源之前首先明確詢問權(quán)限。另一種方法使開發(fā)人員能夠使用文件句柄更容易地刪除文件，而不是被迫先訪問父目錄。
了解有關(guān)COLRv1更多細節(jié)：
https://developer.chrome.com/blog/colrv1-fonts/
但這還不是全部，Chrome 98的DevTools中還有不少改進，您可以在這里查看所有的內(nèi)容：
https://developer.chrome.com/blog/new-in-devtools-98/
Chrome 98將在今天晚些時候開始推出。如果你在一天中沒有自動更新到98版，請到幫助>關(guān)于Google Chrome，一旦有了更新，就可以觸發(fā)它。接下來是Chrome 99，它將于2月3日進入Beta通道，并將于3月1日登陸穩(wěn)定版。