快速业务通道

CSS样式表渐进增强的应用

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03
。如果你拥有鹰一般利锐的眼睛,可能已经注意到在样式表名称的两边使用了单引号(’)来替代双引号(”),这个小技巧可以让 IE5/Mac忽略样式表。IE5/Mac的CSS布局能力非常弱(特别是对浮动和定位的支持),对它们隐藏布局规则是完全可接受的。毕竟,它们依旧能获取颜色和版式信息,这在某些情况下已经够用了。

采用相同的技术,可以导入print.css文件(和你猜想的一样,包含打印布局的特定规则)。

@import ''screen.css'' screen; @import ''print.css'' print;

现在我们不仅拥有了组织得很漂亮的样式表,我们还拥有了一套逐步增强站点设计的有效方法。

(图示:多个样式表间的相互关系以及将它们应用到文档的方法)

现在讨论值一千万美元的问题:如何处理IE6?

对很多伙计来说,Internet Explorer 6 是一个新的 Netscape 4 ——所有人都想让它滚蛋。

我们略过对IE6问题的喋喋不休。IE6的问题已经有了很好的文档总结,并且,老实说,解决起来也并不是那么困难。而且,IE7的采纳相当快速(特别是在消费市场),同时IE8也已经在公测了。这意味着某一天,我们可以真正地对老态龙钟的IE6说拜拜。

不管是有意还是无意,微软在推出IE5时,为渐进增强提供了一个好工具:条件注释。这些巧妙的逻辑片段(在所有其它浏览器中都降级为HTML注释(译注:其它浏览器把IE的条件注释理解为纯粹的HTML注释,不起任何作用))不仅允许某些标记代码片段只作用于IE,还允许这些代码片段只作用于IE的特定版本。

作为有Web标准意识的开发者,我们始终应该首先在大部分现有的兼容标准的浏览器上测试我们的设计,然后再为那些稍作细微修改就能回到正轨的浏览器提供补丁。每个人的工作流程都不同,但我发现最好用一套标准的文件来开始每个项目。我的基本套件包括以下文件:

  • type.css
  • layout.css
  • screen.css
  • print.css
  • color.css

然后,根据项目的需求,添加针对特定浏览器的CSS文件来包含那些“细微修改”。在现在的大部分项目中,这些文件是ie7.cssie6.css. 如果项目要求支持IE6之前的版本,我也会为其创建相应的文件(比如ie5.5.css等等)。将这些文件放在恰当的位置后,我开始将样式规则添加到合适的样式表中。

我的CSS测试都是从Mozilla Firefox中开始,因为我的大部分CSS都是用Firefox的CSS编辑侧栏来编写的。一旦在Firefox中完成了页面设计,我立刻开启其它浏览器来测试查看。大部分表现很完美,因为他们遵守

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号