《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 属性。

《CSS权威指南》--附录相关推荐

css权威指南第四版_16个非常有用的CSS伪选择器，你千万不要错过了！
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
css权威指南pdf
下载地址:网盘下载内容简介 · · · · · · 这本书提供了对CSSl和CSS定位的完整的描述,同时也给出了CSS2的概述.书中对CSS的每个属性都做了详细的探究,同时讨论了各个属性之间如何协 ...
CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. ...
CSS权威指南（第三版）
很早就买了这本书,之前都是断断续续地看,前段时间总算是花时间系统的把它看了一遍.严格的说是第二次才把这本书系统的看完,之前是因为很多知识点看不懂,所以没有系统看.虽然这一次也有好多知识点没有看懂.但是 ...
css权威指南 note2
样式表: 外部样式表(external style sheet) <link rel="stylesheet" type="text/css" href= ...
读书笔记《CSS权威指南》
阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...
CSS权威指南（一）CSS概述
文章目录 1.元素 2.引入样式表 3.样式表 4.媒体查询 5.特性查询 1.元素 (1)置换元素和非置换元素置换元素,指用来置换元素内容的部分不由文档内容直接表示.比如img标签. 非置换元素, ...
翻译《CSS权威指南》第3版第1章有感
昨晚第一章终于翻译完了,今天一直在想其中在 1.4.5 注释章节提示中的一段文字: One way to create "nested" comments accidentall ...
CSS权威指南之选择器补充
1.给拥有两种类属性的标签内加css样式 <!DOCTYPE html> <html lang="en"> <head><meta cha ...

《CSS权威指南》--附录

《CSS权威指南》--附录相关推荐

最新文章

热门文章