CSS3是层叠样式表(Cascading Style Sheets)2.1的下一个版本。在运用CSS3技术之前,我想我们有必要以简短的篇幅大致梳理一下CSS的历史。

自1982年,英国科学家Sir Tim Berners-Lee发明HTML(HyperText Markup Language)以来,web技术以越来越快的速度发展,而最初的CSS提案则在1994年才被提出,当时的HTML已经取得了较大的发展,不同的浏览器厂商为了满足不同的设计需求而增加了许多的显示功能,这使得浏览器的兼容变得愈发困难,也使统一的外部样式显得更有必要。CSS提案一经提出就吸引了当时刚刚成立的W3C的兴趣。1996年12月,W3C正式推出CSS1.0。CSS1.0一经推出就收到了各方积极响应。随后CSS技术的发展一马平川。

CSS1.0主要包括了选择器(包括一些伪类)、布局、样式、定位、背景和盒模型等。在一定程度上规范了HTML的表现形式,促进了同一份代码在各个浏览器上的兼容,CSS1.0的出现是革命性的。

1998年,W3C发布了CSS2.0,CSS2.0对CSS1.0进行了多方面的拓展,增加了更多的伪类,丰富了选择器的用法,增加了光标样式等特性。CSS2。0的出现极大的增强了web的表现力,让web拥有了媲美原生应用的能力。然而,各大浏览器厂商对CSS的支持并不十分理想,CSS1.0花了三年时间在所有主流浏览器上表现一致,而CSS2.0更是由于对CSS1.0的拓展较多,所以发布后的几年间,浏览器的支持情况变得五花八门,这使得代码兼容变得非常困难。为此,2007年,W3C修改和删除了部分CSS2.0的属性从而降低兼容难度——CSS2.1出现了。

丛第一版CSS出现以来,计算机软硬件技术都取得了跨越式的发展,这也对web的表现力提出了更高的要求,更华丽的设计方案和更复杂的交互方式的出现,让CSS显得有些力不从心。为此,CSS3应运而生。

W3C在2001年就着手开发CSS3的规范,与之前的CSS规范研发模式不同,CSS3规范被划分为一个个独立的模块——这样浏览器厂商可以有选择的先支持部分CSS3模块,从而利于CSS3的推广。而各大浏览器厂商也开始迫不及待的支持CSS3的新特性了。

CSS3带来的新特性多种多样,熟练使用更丰富的选择器可以让我们更快的定位元素;文本渲染和阴影效果可以让我们制作出不可思议的文字效果;媒体查询可以帮助我们的页面在不同尺寸,不同方向的浏览设备中保持美观,而CSS动画和过渡、变形的结合则会带来令人称奇的交互体验。可以说,如果加以正确使用,每一项都会为你的页面带来不可思议的展示或交互效果。而丛我的个人工作经验出发,我决定挑出图形变形,动画和媒体查询这三个我个人,认为在工作中最常用到的方面,来制作一些有趣的效果demo。