第一章 CSS3的来龙去脉
在使用CSS3之前,你应该对它的来龙去脉有个基本了解。在这一章中,你将知晓CSS3与CSS2.1的区别,以及当前浏览器对CSS3的支持情况。对于那些尚未完全支持CSS3的浏览器,我们会介绍一些临时兼容的方案和模拟实现的方法。你也会了解到即刻在项目中使用CSS3所带来的各种实际好处,包括可以用来说服多疑的客户或老板的一系列理由(这可是实际的好处,别认为它们仅仅只是些理论观点)。最后,我们还会介绍如何使用CSS3才能符合渐进增强的设计原则,并讲解一些最佳实践,让应用了CSS3的项目尽可能地健壮且与时俱进。
1.1 什么是CSS3
CSS3是CSS2.1的扩展,它在CSS2.1的基础上增加了很多强大的新功能,但是它已不再像CSS2.1那样是单一的规范。CSS3被划分成几个模块,每个模块都是CSS的某个子集的独立规范,比如选择器、文本或者背景。每个模块都有各自独立的创作者和时间表。这样做的好处是整个CSS3规范的发布不再需要停下来等待某个难产的小条目——这个模块或许尚需等待,但其他模块的流程却能够继续向前推进。
在
www.w3.org/Style/CSS/current-work这个网页里,你可以看到一份包含了所有模块的列表,以及它们目前的进度离最终发布还有多远。稍后我们将在本章讨论这些模块的当前进度,现在先来看看CSS3中激动人心的新特性吧!
1.1.1 新特性概览
理所当然,大部分的CSS3规范都重复了CSS2.1的内容,但也在它的基础上进行了很多增补和修订。下面列出来的变更并不全面——全部列出也不太现实,因此我们只罗列了从CSS2.1到CSS3中那些支持度较好、更流行且更实用的变更。
不依赖图片的视觉效果。CSS3包含了大量新特性,可以用来创建一些以前只能通过图片(或脚本)才实现的视觉效果,比如圆角、阴影、半透明背景、渐变以及图片边框等。在这些新特性之中,多数是属于“背景和边框”(Backgrounds and Borders)模块的,其余的则属于“色彩和图像”(Colors and Image Values)模块。我们将在第2章中介绍这些特效,并在之后的章节里多次应用它们。
盒容器变形。CSS3中还有一类视觉效果,让我们可以在2D或者3D空间里操作盒容器的位置和形状,比如旋转、缩放或者移动。这些特效称为变形,在“2D变形”(2D Transforms)和“3D变形”(3D Transforms)模块中都有涉及。你将在第2章中了解变形特效。
独一无二的字体。“字体”(Font)模块引入了@font-face规则,让你能够引入一个存放于服务器的字体文件,并使用该字体来显示页面中的文本,这就突破了以往只能使用用户机器上的字体的限制,也使得页面能呈现出更漂亮的页面。你将在第3章详细了解@font-face。
强大的选择器。CSS3新增了十多个选择器,大部分是伪类和属性选择器。你可用它们选取HTML结构中的特定片段而无需增加特定的ID或类,从而精简代码并使之更加不易出错。这些选择器都描述在“选择器”(Selectors)模块里,在第4章和第5章我会详细地介绍它们。
过渡与动画。CSS3的过渡(transition)在其同名的模块里描述。它是一种简单的动画特效,可以平缓地呈现一个元素的样式变化。例如,当用户将鼠标悬停于按钮之上时渐进且平滑地改变其颜色。更复杂的CSS3“动画”(animation)特性也在其同名的模块里有相应描述,它能够实现更复杂的样式变化和元素位移,而不需要用到Flash或JavaScript。我们会在第5章讨论过渡与动画。
……