重大灾害网站变灰两三事

Reading time ~1 minute

上周六四川雅安地震了，虽然我目前为止也不清楚这个地方具体在哪，但是我们都第一时间接到上级通知，网站变灰以示哀悼。

实现方案

目前网络上最普遍的使用的以下CSS三部曲代码：

html {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") !important; /* Firefox 10+ */

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

/*可以简写为：filter:gary*/

-webkit-filter: grayscale(1);
}

IE6-9 都支持filter属性，而webkit引擎浏览器也率先支持了CSS Filter Effects 1.0，截至目前为止还是W3C的草案，这个页面详细分析了具体有那些浏览器支持-webkit-filter属性，最难搞的是Firefox 20+只能使用SVG实现（SVG Fliter支持浏览器列表）

问题罗列

1 高富帅们的Retina MacbookPro抱怨图片和字体都看不清楚了，据说这是一个webkit已知的Bug，解决方案也很简单，暂时没验证也没时间追查具体原因

2 Safari下使用了背景色的区块简直惨不忍睹，暂时没想到特别好的Hack方案，当时采取了人肉设置问题区块的background-color：transparent；

3 使用上述三剑客CSS代码会导致Mac下Chrome滚动时随机出现黑线和黑块，具体原因不明

4 IE10悲剧的什么都不支持，V2EX上有同学提出可以使用Meta让IE10「优雅降级」为IE7/8/9，

5 如果将三剑客作用于html，不管用各种优先级设置子区块为彩色显示都无法做到，推测可能和滤镜渲染的机制有关，暂时未深究（场景就是希望全页面都是灰色，但是某个特殊区块希望是彩色，醒目显示）

6 Safari 5.1不支持-webkit-fliter属性

根据WPO平台统计的访问淘宝浏览器数据分布来看，搞定trident和webkit引擎就可以覆盖98%以上的用户，所以SVG的Fliter可以考虑不加，因为对性能影响还是非常显著的。

最后请容许我发自内心的喊一句，WTF，请使用自己有限的时间到那些更有意义的地方上去吧…具体请访问dowebsitesneedtolookexactlythesameineverybrowser?

打赏

打赏留言

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦