Stunning CSS3 读书笔记: 第一章 CSS3的来龙去脉
2012-06-21 21:07
246 查看
序
最近看了图灵系列的《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
浏览器前缀:
浏览器使用前缀来尝试一些新特性、值和选择器。
你可能需要使用几行不同的代码来完成实际上相同的一件事,例如:
使用浏览器前缀属性的时候,应该总是包含无前缀的属性并将它放在最后。前缀属性因为位置靠前从而会被靠后的无前缀属性所重载,这才是正确的行为。
处理不支持的浏览器:
接受差异
为一个属性同时提供非CSS3和CSS3的值
使用Modernizr检测CSS3支持
使用Javascript模拟CSS3
对于IE我们需要特殊处理,使用条件表达式过滤IE:
1.提供IE独有的样式表
2.对IE不可见
3.在html标签上添加IE版本类
最近看了图灵系列的《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]-->
相关文章推荐
- 【Back to base】深入理解计算机系统 读书笔记 第一章 计算机系统漫游
- 《从0到1》读书笔记第一章"未来的挑战"第1记:把握潮流风向
- Java编程思想-第一章 1.1-1.4 读书笔记
- 第一章:重构,第一个案例(读书笔记系列2)
- 《Android开发艺术探索》读书笔记----第一章:Activity的生命周期
- TCP/IP详解(协议)读书笔记之第一章概述
- 《面向对象分析与设计》读书笔记——第一章 复杂性
- 操作系统概念--读书笔记之第一章导论(一)
- 《ERP从内部集成起步》读书笔记——第一章 Garthner公司是如何提出ERP的 1.1尊重历史
- TCP/IP协议详解卷1--第一章概述--读书笔记
- 【OpenGL超级宝典第五版】【第一章】3D图形和OpenGL简介 读书笔记
- 《深入理解Java虚拟机》读书笔记---第一章 走进Java
- 《数据结构教程(第四版)》读书笔记-第一章 绪论
- 『C程序设计』读书笔记系列文章之第一章 概述
- 《Python基础教程》读书笔记(第一章:基础知识)
- 《DirectX 9.0 3D游戏开发编程基础》 第一章 初始化Direct3D 读书笔记
- 【读书笔记】CSS3学习(三)
- 《Linux内核设计与实现》第一章、第二章读书笔记
- 《资本论》读书笔记(2)第二卷第一章:资本形态变化及其循环
- Neural Network Methods for Natural Language Processing 系列读书笔记 -- 第一章 介绍