CSS3学习笔记:CSS3的来龙去脉

一、什么是CSS3

CSS3是CSS2.1的扩展,它在CSS2.1的基础上增加了很多强大的功能。它不再是CSS2.1那样是单一的规范,而是被划分成几个模块,每个都是CSS某个子集的独立规范。有些模块已经发展得非常成熟,有广泛的浏览器支持,可以投入实用了。

二、CSS3新特性

CSS3一些支持度较好、更流行且实用的变更:

1. 不依赖图片的视觉效果。比如圆角、阴影、半透明背景、渐变及图片边框等。

2. 盒容器变形。CSS3让我们可以在2D或者3D空间里操作盒容器的位置和形状,比如旋转、缩放或者移动。

3. 独一无二的字体。通过@font-face规则,可以引入一个存放在服务器的字体文件,让页面使用这种新字体,突破用户机器上的字体的限制,使页面更加漂亮。

4. 强大的选择器。CSS3新增了很多伪类和属性选择器,可以用它们选择HTML里面的特定片段,而无需增加额外的ID或类,从而精简了代码,并且使之不容易出错。

5. 过渡和动画。CSS3可以实现诸如平缓地呈现一个元素的样式变化,也可以实现如动画般的复杂的样式变化和元素位移。以往这一般是Javascript或Flash做的事情,现在CSS3可以完成一部分。

6. 媒体信息查询。CSS3能够根据用户的显示终端或者设备特征来提供样式,这些特征包括屏幕的可视区域宽度、分辨率以及可显示的色彩数等。这对于移动设备来说是一款很好的优化工具。

7. 多列布局。CSS3提供的“弹性盒容量布局”让我们可以更容易的实现水平或垂直方向的多列布局,相对于浮动布局或者绝对定位布局来说,它显得更加灵活。

三、浏览器对CSS3的支持状况

IE6并不支持CSS3,IE7/8对CSS3的支持比较有限,除此之外,大部分主流浏览器对CSS3都有比较好的支持度了。我们必须关心IE6/7下的显示情况。如果CSS3所实现的效果是一种锦上添花式,则我们可以仅考虑在IE6/7下看起来页面比较正常,不影响布局及阅读即可。若CSS3的实现能够影响到页面布局和内容,在IE6/7下看起来有碍美观和阅读,则我们必须想办法解决。通过条件注释提供专门针对IE6/7的代码、使用脚本识别CSS3代码或实现类似的效果都是不错的办法。

我们编写Web页面时,最好使用一种“渐进增强”的方式。意思是,我们先用平实而朴素的HTML实现页面的基本显示,再慢慢去使用一些CSS3技术去实现更好的体验。这样做的好处是,使用低版本浏览器的用户不会遇到阅读障碍,而使用高版本浏览器的用户可以获得更好的视觉体验。这很好理解,正如32寸的纯平电视和50寸的液晶电视能够看到相同的节目内容,但你不能强求它们的显示效果完全一样。如果硬要显示效果一样,只能委屈50寸的液晶电视降低显示质量了。

四、CSS3的好处

CSS3的优点并不止于能让页面看起来更好看,而且还具有以下好处:

1. 减少开发和维护的耗时。使用CSS3技术可以实现以往需要制作图片才能实现的效果,比如圆角、阴影、透明背景、渐变等。而且只要修改几个参数就能改变这些属性,这比起使用图片更加方便。CSS3可以实现部分过渡和动画效果,这省去了开发Javascript或者Flash的时间。最后,CSS3能减少层和类的使用,使页面结构更简洁清晰。

2. 提升页面性能。更少的标记和图片意味着浏览器的加载请求减少了,下载的字节量也减少了,这都能够有效地提升页面性能。

3. 有利于搜索引擎优化。CSS3能够实现很多图片、脚本或动画的效果。以往这些都是不能被搜索引擎识别的,但使用CSS3之后,这些都能够被文字代替,因此对搜索引擎也更加友好。

4. 与时俱进。使用CSS3能够页面处于Web设计的前沿,随着技术的进步,CSS3会越来越普及。因此,现在开始使用CSS3会使往后的维护及改版工作更简单。

五、明智地使用CSS3

如上所述,CSS3目前的浏览器支持度已经获得很大的进步,但毕竟并不是所有的特性都能被所有的浏览器支持了——它还是一个在不断完善的标准。因此,我们必须明智地使用CSS3,在实现先进的视觉体验时,不忘记保持各浏览器可读的原则。

1. 使用浏览器前缀。

当一个特性还处于候选状态时,浏览器会谨慎地处理它们,通常不会直接支持,而是通过浏览器前缀来识别属于自己浏览器的代码,从而按自己理解的去实现。因此,很多时候我们都需要给代码添加浏览器前缀来实现。一些常见的前缀如下:

-khtml-  Konqueror

-ms-  IE

-moz-  Firefox

-o-  Opera

-webkit-  Safari、Chrome

每一条代码都必须撰写前缀,意味着每一条CSS3代码都可能需要3-4条带前缀的代码。虽然比较麻烦,但目前来说这么说是保证页面在各浏览器都能正常显示的最好办法。有些CSS3预处理工具(如Sass、LESS是比较出名的两个)可以帮助我们创建浏览器特定的属性,我们只需要撰写标准属性即可。

使用前缀时,应该总是包含无前缀的属性(即标准属性)并把它放在最后。

2. 处理不支持的浏览器

对于不支持的浏览器,我们也不能忽略。如果CSS3确实非常有实现的价值,那么我们必须考虑如何在低版本浏览器上实现。如果CSS3效果影响了低版本浏览器的显示,那么我们必须解决它。

一种最常见的处理方法是接受差异。只要不影响低版本浏览器的显示和阅读,就不再对它们进行处理以实现类似的效果。用户不会觉得唐突,因为他们原本就没有期望出现这些效果。

第二种处理方法是为一个属性同时提供非CSS3和CSS3的值。第一条是为不支持的浏览器准备的,第二条CSS3代码是为高级浏览器准备的。不支持的浏览器会忽略第二条代码,而高级浏览器会用第二条代码去覆盖第一条代码。

第三种方法是使用Modernizr检测CSS3支持。Modernizr(www.modernizr.com)是一个脚本,它可以检测用户浏览器对CSS3和HTML5的支持程度,然后对html元素添加一些类来表示当前浏览器是否支持这些特性。比如“no-multiplebgs”表示浏览器不支持多背景图片,我们可以使用这个前缀,来书写专门针对该浏览器的代码(使用单背景)。

第四种方法是使用Javascript模拟CSS3。某些Javascript可以使不支持的浏览器同样实现CSS3的效果,比较常用的有IE7-js(并非只针对IE7)、PIE等。

第五种方法是使用IE滤镜。

第六种方法是使用条件注释来过滤IE。通过条件注释,使特定代码只备IE识别,从而可以为IE提供特别的处理代码。好处是这种条件注释是合法的HTML,符合标准。

 

注:本文概括自Zoe Mickley Gillenwater编写的《CSS3实用指南》。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>