CSS processing of gray, black and solemn tones for the entire site

In actual projects, we often encounter times when the entire site needs to be temporarily changed to a gray and black tone, such as National Memorial Day, or certain specific requirements. At this time, we only need a few simple steps to complete the processing: 1. Add it to
css

body{
    
    
    filter: grayscale(100%);/*火狐*/
    -webkit-filter:grayscale(100%);/*chrome*/
    filter:gray; /*IE6-9*/	
}

This is basically compatible with all modern browsers except IE10 and IE11, but please note: this code does not handle background images, that is, if your body has a background image set. It will not turn gray and black, you need to deal with the background separately. Then there will be some pictures or backgrounds that will not change color in ie6-9. You need to write a hack to deal with this, such as what I wrote.

<!--[if gte IE 6]> 
<style type="text/css">
img{
    
    filter:gray;} /* 针对图片不变灰处理 */
</style>
<![endif]-->

if gte IE 6 only supports ie6 or above, and ie10 or above does not support if mode, so here it actually supports ie6 to 9.

2. Now let’s focus on compatibility with ie10 and ie11. These two versions are weird and do not support filters, so it is a bit troublesome to deal with. A grayscale.js needs to be introduced. Note that js is placed before </body>, the code is as follows

 <script type="text/javascript" src="js/grayscale.js"></script>
<script type="text/javascript">
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){
    
     // 判断是IE10或者IE11
    grayscale(document.body);
}
</script>

This basically completes all browser compatibility. If you need to make separate CSS calls for IE10 and IE11, you can use the media query function, as follows

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
    
    
您的代码//支持ie10和ie11
} 

The code is basically complete here, but using grayscale.js will have a greater impact on performance. I actually tested that when accessing the website through ie10 and ie11, it takes 2 to 3 seconds to display the page. So in order to be compatible with ie10 and ie11, is it necessary? Introducing this js requires a matter of opinion. Finally, I would like to say that it is rubbish! ! !
I need this again recently, I found a new code, pure css, good

	html {
    
    
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(100%);
	}
	
	html{
    
    
	filter: grayscale(100%);
		 
		  /* webkit内核 */
		 
		  -webkit-filter: grayscale(100%);
		 
		  /* 火狐内核 */
		 
		-moz-filter: grayscale(100%);
		 
		  /* 微软内核 */
		 
		  -ms-filter: grayscale(100%);
		 
		  /* 欧朋内核 */
		 
		  -o-filter: grayscale(100%);
		 
		  /* ie专有滤镜 */
				
				filter:gray;
	}

There is a strange problem in IE8 and IE9. The background of some pictures does not change color. I saw this code with wildcards on the Internet. I tried it and it worked.

// 在样式最上加上“*”通配样式
*{
    
    
   -webkit-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}