记4月4日 — 各大网站变灰记录

2020-04-04

技术分享

解说一次关于 2020 04 04 各大网站变灰的记录。

开始：

我们通过各大网站变灰代码的记录，得到以下结果：

基本都是通过 grayscale 来实现的
都不支持 IE 11
但在 IE 11 的情况下表现却各不相同
B站、A站、淘宝、京东、百度、虎扑、开源中国

B 站：

 html.gray{-webkit-filter:grayscale(.95)}

谷歌 B站

IE B站

A站：

 html .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);
  -webkit-filter: grey;
  filter: gray;
  } 

有多浏览器前缀考虑
实际上无法用 ie11 打开网站
不过和 B 站一样，去除无关内容，值得称赞

谷歌 A站

IE A站

淘宝：

html{
     -webkit-filter: grayscale(100%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

谷歌淘宝

IE 淘宝

京东：

 /* 一段控制灰色失效的 JS 代码 */ 
$html.toggleClass('o2_gray', isDuringDate('2020/04/04 00:00:00', '2020/04/04 23:59:59')) 
html.o2_gray {
   -webkit-filter: grayscale(100%);
   filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
   } 

可部分加载分类条目
但内容无法加载

谷歌京东

IE 京东

百度：

 @font-face{
  font-family:cIconfont;
  src:url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-a37745d6f3.eot);
  src:url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-a37745d6f3.eot?#iefix) format('embedded-opentype'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-b021b3a4c4.woff2) format('woff2'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-2a209a281f.woff) format('woff'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-37639e7474.ttf) format('truetype'),url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-475b0dc226.svg#iconfont) format('svg')} body.qm-activity #head_wrapper,body.qm-activity #s_menu_gurd,body.qm-activity #u1,body.qm-activity #u_sp,body.qm-activity .s-ctner-menus .s-menu-item-underline,body.qm-activity .s-news-rank-content,body.qm-activity .s-news-wrapper .s-news-list-wrapper .hot-point,body.qm-activity .s-news-wrapper .s-news-list-wrapper:nth-child(-n+3) img.s-news-img,body.qm-activity .s-top-left.s-isindex-wrap{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray} 

谷歌百度

IE 百度

虎扑:

 <html style="filter: grayscale(100%);> </html>

谷歌虎扑

IE 虎扑

开源中国：

body {   
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
   -webkit-filter: grayscale(1); 
  } 

谷歌开源中国

IE 开源中国

总结：

百度和淘宝两个老牌互联网公司对兼容的重视可见一斑
B站和A站等二次元视频网站也都删除了其他无关内容
老牌视频网站腾讯、爱奇艺表现良好，但优酷在 IE 11 的情况会加载其他内容
京东在 IE 11 的表现让人非常失望
至于 A 站在 IE 11 无任何反应的情况，希望相关技术人员能重视一下吧

效率和兼容可能会有很大程度上的冲突，但出发点都是对抗击新冠肺炎疫情斗争而牺牲的烈士和逝世同胞寄托哀思。

PS：在4月4号当天，本博客也采取了灰度处理。

思路：采用 js 脚本，通过 wordpress 的脚本，完成处理。

 <script type="text/javascript" src=" https://cdn.jsdelivr.net/gh/yumusb/staticfileCDN@latest/gray.js "></script> 

采用的是js脚本，脚本的内容：

document.getElementsByTagName('body')[0].style.filter = 'grayscale(100%)';

总体来说是比较方便的，毕竟是大厂的 js 托管平台提供的。