今天又是全国哀悼,和2年前的汶川一样。大多数网站都把页面调成了灰色以表哀悼。

   不过细心的朋友可能发现了,一些网站的页面灰色效果,只有IE浏览器有效。火狐、Chrome等用户看上去还是一片彩色。(如下图,左边火狐,右边IE)。这是什么道理呢?

   先让我们看看如何实现IE下页面变灰吧。(这里需要一点网页制作知识)

   其实,拿CSS来控制,一行代码就能完成。用的是IE的filter滤镜。通过给页面所有元素加上灰色滤镜,IE在渲染的时候就会自动把图片、文字等一切页面元素变灰。代码如下:

   *{filter: gray;}

   其中*表示所有html元素。如果有一定CSS经验你会知道用*选择器是非常不建议的,但这里为了保证能够渲染到所有的元素,必须使用*,不然有些背景图会漏过(就像我的网站,如果给body加滤镜,背景仍然会是彩色)。当然,如果你的网页比较简单,能够用body选择器就尽量别用*。

   属性中的filter是IE特有的滤镜,相关的属性可以查阅文档。既然是IE特有的,那别的浏览器当然无法渲染。那又是什么原因导致了IE独享这个CSS规则呢?

   在很久以前,各大浏览器为了抢夺标准,纷纷设立了自己的小标准,比如微软公司就为IE设立了一系列的滤镜以及页面过度效果,火狐则支持阴影效果(shadow)。但这些私有的小标准不被W3C承认(他们不是Web标准的),所以就导致了各浏览器都有自己的“特长”。

   在现在尤为热门Web标准为指导思想的网页设计中,使用这些不规范的标准是不可取的。也就是说,今天哀悼日许多网站把网站变灰的方法,是不建议使用的。因为这种方法不能考虑到所有的用户。比较妥善的做法,应该是更改CSS配色来达到变灰的目的,当然与一行filter代码比起来,工作量比较大。但是这样可以兼容所有的浏览器。

   但在中国,采用滤镜的方法,还是能够保证大部分人的观看效果的。而在国外,尤其是欧美地区,由于浏览器大战的效应,起码有一半的人无法看到filter:gray的效果。那为什么中国式“浏览器大战”不影响滤镜效果呢?

   分析中国的网络环境,不难看出,大部分人仍然在使用IE浏览器,或是IE内核的浏览器,其中又有很大一部分人在使用老掉牙的IE6版本。所谓IE内核的浏览器,就是指页面渲染引擎仍然是IE,只是换了个壳而已的浏览器。比如傲游、360安全浏览器等,这些浏览器整天拼个你死我活,标榜自己有多NB,抢着用户市场,却只是IE之上的一个浮华的UI而已!其渲染效率与JS效率从本质上说根本没有改变,这些浏览器只比IE多几个功能而已(比如分页、手势等)。这就像造汽车,同样的发动机,换个车壳而已,根本没什么好NB的,因为最关键的核心部分并不是你自己设计的。国内的浏览器大战,真是让人哭笑不得。所以,既然这些浏览器都是IE内核,自然支持filter了。当然,IE该差的,他们也都差了。跑个Acid3测试就全露出狐狸尾巴了~

   不过我很高兴看到有许多网站已经开始通过更改CSS配色的方法来实现页面变灰的效果了。虽然只为了今天短短的一天,但说明中国的设计师已经开始考虑非IE用户了。也说明真正的浏览器大战已经开始渐渐作用于中国了。很高兴看到这一天。希望中国也能自己开发浏览器内核,而不要整天给IE“换装”,来制作换汤不换药的所谓的浏览器了!只有创新,才是真正的自主开发,才不会被人鄙视。在这个功利的社会下,指望中国在软件方面有所创新和成就,实在是比较困难,不过我仍然希望我能看到这一天。虽然平时经常说中国这个不行那个不行,但这都是无奈的抱怨。其实我们打心眼里,就不希望我们比任何一个国家,任何一个民族差!