Stunning CSS3 读书笔记: 第一章 CSS3的来龙去脉
序
最近看了图灵系列的《Stunning CSS3》，中文版是《CSS3实用指南》。我个人很喜欢这本书的风格，没有一直讲理论，而是通过几个实战的例子，一步步地引导读者，在引导的过程中带出知识点。一边看书，一边动手实践，收获颇多。
看完了这本书，觉得有必要总结下，梳理下收获的内容。废话不多说，直接进入主题。
第一章 CSS3的来龙去脉
这一章主要是给出了几个重要的概念和思想，为后面几章的学习，以及为实际项目中应用CSS3给出了一些指导性的想法。
1.什么是CSS3
CSS3是CSS2.1的扩展，在CSS2.1的基础上增加了许多强大的功能，以下是目前支持度较好，流行且使用的新特性：
- 不依赖图片的视觉效果
- 盒容器变形
- 独一无二的字体
- 强大的选择器
- 过渡与动画
- 媒体信息查询
- 多列布局
2. 现在就开始使用CSS3
W3C所使用的成熟级别 :
工作草案(Working Draft) < 最终公示(Last Call) < 候选推荐标准(Candidate Recommendation) < 提名推荐标准(Proposed Recommendation) < 推荐标准(Recommendation)
处于推荐标准 的已经可以完全正常使用。尽早使用新的CSS特性能够帮助Web开发社区发现其缺点、差异，能够有效促进它们成为真正的标准。
主流浏览器 Chrome，Safari，Firefox，Opera对CSS3都有了很好的支持度，IE9对CSS3有所支持，IE8及之前的版本则基本不支持CSS3。
关于浏览器支持度的内容可以参考这里。
注：鉴于国内的IE的市场份额，还有在企业内部没有条件升级浏览器等等情况，我们不得不考虑IE的存在。
3.渐进增强
渐进增强(Progressive Enhancement)是作者反复强调的一种重要思想，可以认为是对实际的开发工作有着指导性的作用。
渐进增强是这样一种开发方式：在你编写Web页面时，首先让它们在基础的浏览器和设备上正常工作且展现得当，然后再辅以更高级但非必要的CSS和Javascript等增强功能，来为当前和未来的浏览器提供更好的支持。其目标是向尽可能广泛的受众提供尽可能优质的体验。
与其在支持度较低的浏览器上添加Hack、兼容方案、模拟脚本等耗费大量的人力和时间，不如努力改善可访问性或进行更多的可用性测试。
想让网站在任何环境下看起来都保持一致是不可能的。若使用渐进增强，就无需为了适应所有人而放弃CSS3提供的技术。
4.使用CSS3的好处
- 减少开发和维护的耗时(内容与形式分离)
- 提升页面性能(比如使用CSS3代替图片，就可以减少Http Request次数，且需要下载的内容减少)
5.明智地使用CSS3
浏览器前缀:
| 前缀 | 渲染引擎 | 浏览器 |
| -ms- | Trident | Internet Explorer |
| -moz- | Mozilla | Firefox |
| -webkit- | Webkit | Chrome, Safari |
| -o- | Presto | Opera |
浏览器使用前缀来尝试一些新特性、值和选择器。
你可能需要使用几行不同的代码来完成实际上相同的一件事，例如：
div{ -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
使用浏览器前缀属性的时候，应该总是包含无前缀的属性并将它放在最后。前缀属性因为位置靠前从而会被靠后的无前缀属性所重载，这才是正确的行为。
处理不支持的浏览器：
- 接受差异
- 为一个属性同时提供非CSS3和CSS3的值
- 使用Modernizr检测CSS3支持
- 使用Javascript模拟CSS3
对于IE我们需要特殊处理，使用条件表达式过滤IE:
1.提供IE独有的样式表
<!--[if IE]>--> <link rel="stylesheet" href="ie.css" type="text/css"> <!--<![endif]-->
2.对IE不可见
<!--[if !IE]>--> <link rel="stylesheet" href="not_ie.css" type="text/css"> <!--<![endif]-->
3.在html标签上添加IE版本类
<!--[if lt IE 7]><html class="ie6"><![endif]--> <!--[if IE 7>]><html class="ie7"><![endif]--> <!--[if IE 8>]><html class="ie8"><![endif]--> <!--[if IE 9>]><html class="ie9"><![endif]-->
