您的位置：首页 > Web前端 > CSS

《CSS权威指南》--附录

2014-04-22 17:04 232 查看

《CSS权威指南》--附录

虽然一条规则中的声明可以按照任何顺序写出来，但我背后还是有一个优先级顺序：

1. display 及相关声明；

2. position 及相关的声明；

3. margin、padding 和border 及相关声明；

4. 字体/文本相关声明；

5. 装饰相关声明。

比如：

.demo {

display:block; position:absolute;

height:100px; width:300px; left:10px; top:10px;

margin:0 5px; padding:10px;

font-size:10px; line-height:1.2;

background-color:#eee; border:1px solid; border-radius:6px;

}

这个顺序首先考虑了我认为对元素最重要的信息，即它们怎么在页面上定位，定位到哪里。随后是不那么重要的信息，包括元素的视觉装饰。有时候，我也会根据需要改变这个顺序。比如，要是margin 声明在相应规则里最重要，就把该声明写在最前头。我认为把相关性强的几条声明都写在一行是一个不错的考虑，因为把所有声明都写在一行，会导致CSS 代码难以理解，而每个声明各占一行又会让样式表过长，

有时候需要来回滚动着看。当然，这完全是个人喜好问题，“仁者见仁，智者见智”。

不过，无论如何，我都向大家强烈推荐一种组织CSS 的方法，那就是在样式表中按照接受样式的HTML 标记出现的先后顺序，依次列出相应的CSS 规则。千万不能把新样式全都扔到样式表最后去。CSS 样式表有时候一写就会非常长，如果不这样按顺序罗列，将来要想找到为某个元素应用样式的某条规则会非常麻烦。

支持旧版本浏览器

事实上，直到不久前，浏览器嗅探（browser sniffing）都是检测浏览器的一种流行方式。所谓浏览器嗅探，就是通过JavaScript 检查浏览器的用户代理字符串中包含的浏览器名字，然后再为之提供能够弥补不足的代码。然而，我们实际上关心的并非浏览器，而是浏览器到底支持什么功能。这就是为什么现在大家使用的方法都不再关心浏览器，而是直接检测功能的原因。检测到功能缺陷，再有针对性地提供后备代码或者腻子脚本，就可以弥补相应能力的不足。

后备代码

IE9 之前的浏览器都不支持多背景，因此后备代码就是在多背景

声明之前简单地再加一条单背景声明，比如：

.someElement {background-image:url(images/basic_image.jpg);}

.someElement {background-image:

url(images/cool_image1.jpg),

url(images/cool_image2.jpg),

url(images/cool_image3.jpg);

}

所有浏览器都能理解第一条规则，但只有支持多背景的浏览器才会采用第二条规则。如果某浏览器无法解析某条CSS 规则，可能是因为它不支持其中的CSS 属性或者声明中包含错误，那么它就会跳过该规则，接着读取下一条规则。因此，IE8 及更早版本的IE 浏览器会忽略第二条规则，而只呈现basic_image.jpg。

条件注释

如果你真想单独为IE 浏览器做点什么，可以使用如下所示的条件注释来添加后备代码：



<link src="ie_only.css" rel="stylesheet" />

<![endif]-->

这种特殊格式的HTML 注释会被非IE 浏览器忽略，只有IE 浏览器才会执行其中的代码。就这个例子而言，我们是在为IE8 及更低版本的IE 加载额外的样式。加载条件可以使用lte（less than or equal to，小于等于）、lt（less than，小于）、gte（greaterthan or equal to，大于等于）、gt（greater than，大于），甚至只写一个浏览器版本号如IE 6。以此为不同版本的IE 提供后备代码。有时候，浏览器可能根本不支持你需要的功能。此时，仅提供后备CSS
代码还不够，还需要使用腻子脚本。

腻子脚本

腻子脚本（polyfill）指的是一段JavaScript 代码，能够赋予浏览器未曾有过的功能。目前，几乎所有CSS3 和HTML5 功能都有各自对应的腻子脚本，包括视频回放和阴影，从而让那些老得走不动道儿的“老家伙”们也能闪现青春的光芒。

Paul Irish 维护了一个完整的腻子脚本列表，地址为：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills。

要在页面中添加一段腻子脚本，首先要下载并将其保存在网站的一个文件夹中。我为此创建了一个helpers 文件夹。然后，在页面<head>标签中添加一个<script>标签把它加载进来。

<script type="text/javascript" src="helpers/selectivizr.js">

</script>

怎么确定是否需要某个腻子脚本呢？推荐大家使用Modernizr。Modernizr（http://modernizr.com）是一个JavaScript 文件，能够帮你检测用户浏览器对HTML5 和CSS3功能的支持情况，然后为顶级的<html>标签添加一组类，标明浏览器支持什么功能。另外，它还会设定一个JavaScript
对象modernizr 的属性，以便你通过JavaScript 来测试这些功能。Modernizr 添加的类主要是为CSS 提供便利

 html5shiv.js（http://code.google.com/p/html5shiv）：让IE8 及更低版本的IE 识别section、 article、nav 等HTML5 元素。

 selectivizr（http://www.selectivizr.com）：让IE（6/7/8）支持::first-child 等高级CSS 选择符。

 IE9.js（http://code.google.com/p/ie7-js）：修复从IE6 到IE9 的很多bug 和缺损功能。

 CSS3Pie（http://css3pie.com）：让IE6 到IE9 支持圆角、背景渐变、边框图片、盒阴影、RGBa 颜色等可视化的CSS3 功能。

 Respond.js（https://github.com/scottjehl/respond）让旧版本浏览器支持媒体查询。

 -prefix-free（http://lea.verou.me/projects）为需要厂商前缀的CSS3 声明添加前缀（参见第4 章）。

 borderBoxModel.js（https://github.com/albertogasparin/borderBoxModel）：让IE6 和IE7 支持CSS3 的box-sizing 属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航