Actual record of website graying on April 4

Keywords: Front-end IE xml

Grey record of website on April 4

  1. It's basically implemented through grayscale
  2. No IE 11 support
  3. But in the case of IE 11, the performance is different
  4. Station B, station A, Taobao, Jingdong, Baidu, Hupu, Kaiyuan China

B station

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

A station

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. Consider multiple browser prefixes
  2. You can't actually open a website with ie11
  3. But like station B, it's commendable to remove irrelevant content

TaoBao

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

JD.COM

/* A JS code to control gray failure */
$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. Category entries can be partially loaded
  2. But the content could not be loaded

Baidu

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

Tiger flutter

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

Open source China

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

summary

  1. Baidu and Taobao, two old Internet companies, pay attention to compatibility
  2. Other irrelevant content has also been deleted from secondary video websites such as station B and station A
    1. Tencent and iqiyi, old video websites, performed well
    2. But Youku will load other content in the case of IE 11
  3. JD's performance in IE 11 was very disappointing
  4. As for the situation that station A has no response to IE 11, I hope relevant technicians can pay attention to it

Novel coronavirus pneumonia and the dead compatriots may be at the mercy of the conflict between efficiency and compatibility.

Posted by johng on Sun, 05 Apr 2020 11:58:36 -0700