国务院紧急通知清明节当天全国哀悼,各个网站也赶紧实现了全站灰度呈现,一起来看看各大厂都是怎么干的。
淘宝(taobao.com)
![50度灰淘宝](https://ambeta.github.io/post-images/1586001637288.png)
淘宝比较直接,直接在 html
根元素上添加了 filter
样式,同时也有对 IE6 的支持:
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
百度(baidu.com)
![50度灰百度](https://ambeta.github.io/post-images/1586001911862.png)
百度做得更细致一些,直接精确到了对应的 DOM 元素,可以看到网站左上角的空气质量显示仍保留有颜色。
技术实现上也是使用 filter
同时添加了对 IE6 的支持,但用了 postCSS 或类似的 CSS 预处理器,相比于淘宝的实现多了很多的 browser vendor prefix。
腾讯(qq.com)
![50度灰腾讯](https://ambeta.github.io/post-images/1586002406191.png)
腾讯网在 body
元素上添加了一个 css 样式类 garyBody
(grayBody???),同样使用 filter
属性实现灰度变化,但是缺少了对 IE6 的支持。
另一个值得注意的是,body 上的这个样式类是通过 js 动态插入的,所以在网站打开时会有一个从彩色切换到灰色的跳变,并且如果禁用了浏览器脚本执行的话,网站就无法切换到灰色模式了。
京东(jd.com)
![50度灰京东](https://ambeta.github.io/post-images/1586002807113.png)
京东也是直接在 html
根元素上添加了相应的样式,所使用的 css 属性与淘宝一致,不过使用的是类名选择器而不是标签选择器。
另外,京东的整个网站是一个单页面应用,并且没有做首屏服务端渲染,所以禁用浏览器脚本的话网站基本无法使用,当然也没法切换到灰度模式:
![禁用脚本后的京东](https://ambeta.github.io/post-images/1586003024944.png)
总结(吐槽)
腾讯的哥们最粗(单词拼错?缺乏IE6支持?)
百度的哥们最细(精确到元素,可能网站结构比较简单吧:))
花了半个小时的时间写了一篇这么无聊的文章,了解了一个全站变灰的方式以及可能的坑,当然也不希望以后会用到这个技术吧。