上周六四川雅安地震了,虽然我目前为止也不清楚这个地方具体在哪,但是我们都第一时间接到上级通知,网站变灰以示哀悼。
实现方案
目前网络上最普遍的使用的以下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?