序
最近看了图灵系列的《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]-->