大家都在抱怨为什么我们不用更多的CSS3和其他一些灵活而有潜力的辅助技术,但是我们仍然需要考虑IE6和其他烦人的浏览器。
我们在实际开发过程中是怎么做的呢?在开发网站中我们怎样做到即利用最新的编码技术又可以保证Internet Explorer的用户的正常访问呢?
在这篇文章中,我们将见到既可以保证IE用户良好的用户体验又可以保证技术前进的措施。我们将集中在CSS部分,但是会提供一些处理其他问题(overall markup)的小技巧。
可以斟酌我们之前的文字:
内容最重要
杰弗里-泽尔德曼(Jeffrey Zeldman,Web 标准项目小组的负责人)曾经说,“内容要先于设计。缺少内容的设计不是设计,是装饰。” 事实上,在我们网站上最重要的是内容。无论他们使用什么样的浏览器,这才是他们需要得到的东西。
使用CSS3不是要忽略过时的浏览器,把访客拒之门外 。我们应该在老浏览器甚至是IE5、IE5.5里面测试我们的网站,保证每个用户可以看到内容。
这也不是说我们要退出消灭IE6的战争。我们仍然可以学习以下网站的例子,比如Twitter和YouTube,添加一个平易近人(dd visible but not dead-end)的升级提示。
Twitter和Youtobe的给IE6用户的提示信息
记住:每个专业人员有责任教育那些对他们专业不熟悉的人。我们应该解释这些原理给我们的客户,但不能颐指气使地说教。毕竟他们的工作不是搞清楚这些事。
首先是最基本的:“三层”分立(HTML, CSS 和 JavaScript)
当我们一步一步建立一个新站点的时候。首先,是HTML。我们将尽可能使用语义化的标签来标记我们的内容:标题应该用heading,列表用list,等等。内容完美的可读性和仅仅完成这部分代码就拥有可理解的结构是最低限度。内容应该有理有据,我们必须时刻记得这“层”(HTML)是我们开发其他剩余项目的基石。
其次,我们添加CSS样式。这一步,我们为站点添加视觉元素,使站点个性化。同时我们应该保证在没有第三层(JavaScript)的时候,内容的可读性。
最后,第三层JavaScript,行为层。这里我们给站点加入交互元素。用像tabs、sliders、lightboxes等工具丰富站点的体验。
将这些过程铭记心中,任何浏览器都可以访问我们的内容。保证过时的浏览器只得到基本的内容,而忽略那些妨碍用户浏览的复杂代码。
为老浏览器添加基本样式
这样我们语义化标记做完了。我们知道一些浏览器不能正确渲染CSS或者根本不能渲染,像那些Netscape 4.o或者Internet Explorer 4.0之前的浏览器,显示裸内容——无样式版——是最佳的选择。
一些同学认为时至今日没有必要这样做。但是如果你想确保那些使用老浏览器的同学不会陷入困境,那么用link 链接基本版本的CSS,然后用@import链接更高级CSS文件吧,如下:
也可以跳过link全部标签,留给老浏览器一个只有文字的网站版本:
拥抱差异
现在让我们来处理这个常用浏览器中的害群之马:Internet Explorer 6。
你有两个选择:
1.如果在你站点的访客中只有很少比例的人在用它(IE6),你只需要为IE6建立一个基本的样式。
2.接受你的设计在IE6中将得到不一致的表现,并且决定该舍弃什么:哪些IE6问题需要纠正那些该放弃。
如果你选择提供给IE6一个基本的样式,最好的办法是利用Universal IE6 CSS。实际上你的网站没有设计,但是这个样式表确保网页有个可读的宽度,合理的标题大小,并且内容也有一些适当的留白。
在HTML文档里,应该添加一些条件注释到样式链接上,为IE6屏蔽其他样式文件:
在第一个注释里面,为除IE66以外的浏览器引入了主要的样式文件(因为这个“!”)。在第二个注释里面我们直接从Google文件库引入Universal IE6样式表(还可以节约带宽!作为译者的我忍不住:囧一个)。
Make Photoshop Faster 这个网站就为IE6使用了Universal style sheet
如果你更看好第二路线,你必须做好面对浏览器渲染不一致的心理准备。知道在IE6、甚至IE7和IE8,一些设计的细节将看不到或者不能被完美的渲染。别因为这个悲剧感到不爽哦。
目录
- 在IE主流时代诗意地编码(一)
- 在IE主流时代诗意地编码(二)
- 在IE主流时代诗意地编码(三)
- 在IE主流时代诗意地编码(四)
- 本文译自 Smashing Magazin [ 英文原文 ]




