快速业务通道

CSS样式表渐进增强的应用

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03
)。结果,用渐进增强的方式来处理所有媒介的细节讨论,如果不写成一本书的话,也得用上好多篇幅。然而请别沮丧:在移动世界里,差异正开始统一起来,并且一些非常聪明的人正开始将资源放在一起以帮助我们开发。不过,为了节约时间和节省精力,我们将集中于打印设备上。

通常,我们需要使用另一个link元素来添加打印样式:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

按照惯例,上面这个样式表包含所有打印相关的规则,包括版式和颜色规则。特别是版式,样式表中的规则大部分很可能拷贝自main.css. 也就是说,这造成了很多重复代码。

可以看出从布局样式中拆分出版式和颜色样式的好处了:在打印样式表中,我们不再需要那些重复的规则了。除此之外,可以使用另一个组织上的小技巧来改进站点的适用性,以及针对有问题的浏览器隐藏某些布局样式。

回顾下我们的样式表,考虑以下代码:

<link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" />

我们没有声明媒介类型,因此 Netscape 4.x 会读取这三个文件中的所有样式。但是,Netscape浏览器能理解最基本的CSS, 我们可以利用这一点。通过将layout.css包含的所有样式移动到新的样式表——适当的取名为screen.css, 我们可以进一步组织样式。最后,将layout.css中的内容更新为引入screen.css, 这样,NS4.x和它的同族浏览器们就再也聪明不起来了(因为它们不理解 @import指令)。(译注:作者这里说的是将所有layout.css中的内容都移动到screen.css中,然后在layout.css中通过@import引入screen.css. 我觉得最好的做法应该是在layout.css中保留最基本的NS4.x也可以理解的布局样式,而将其它高级布局样式移动到screen.css中。)

@import ''screen.css'';

还有一些改进的余地——应该声明样式表所针对的媒介,我们通过给@import声明添加媒介类型来做到这点:

@import ''screen.css'' screen;

问题是IE7及以下浏览器不理解这种语法从而忽略上面的样式表,如果想给这些浏览器提供上面的样式(这是经常期望的),可以很简单地使用条件注释来做到,这将在下文阐述

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站: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号