4月4日網站變灰實錄

躍千山發表於2020-04-05
網站

4月4日網站變灰記錄

  1. 基本都是通過 grayscale 來實現的
  2. 都不支援 IE 11
  3. 但在 IE 11 的情況下表現卻各不相同
  4. B站、A站、淘寶、京東、百度、虎撲、開源中國

B 站

html.gray{-webkit-filter:grayscale(.95)}
複製程式碼

image-20200404231148322.png

image-20200404231208890.png

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;
}

複製程式碼
  1. 有多瀏覽器字首考慮
  2. 實際上無法用 ie11 開啟網站
  3. 不過和 B 站一樣，去除無關內容，值得稱讚

image-20200404231309976.png

image-20200404231242170.png

淘寶

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

image-20200404231605925.png

image-20200404231611053.png

京東

/* 一段控制灰色失效的 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);
    }
複製程式碼
  1. 可部分載入分類條目
  2. 但內容無法載入

image-20200404231429511.png

image-20200404231408461.png

百度

@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}
複製程式碼

image-20200404230127672.png

image-20200404230827306.png

虎撲

<html style="filter: grayscale(100%);>
</html>
複製程式碼

image-20200404230925407.png

image-20200404231024051.png

開源中國

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);
}
複製程式碼

image-20200404231755038.png

image-20200404231801732.png

總結

  1. 百度和淘寶兩個老牌網際網路公司對相容的重視可見一斑
  2. B站和A站等二次元視訊網站也都刪除了其他無關內容
    1. 老牌視訊網站騰訊、愛奇藝表現良好
    2. 但優酷在 IE 11 的情況會載入其他內容
  3. 京東在 IE 11 的表現讓人非常失望
  4. 至於 A 站在 IE 11 無任何反應的情況，希望相關技術人員能重視一下吧

效率和相容可能會有很大程度上的衝突，但出發點都是對抗擊新冠肺炎疫情鬥爭而犧牲的烈士和逝世同胞寄託哀思。

相關文章