与 CSS2 相比,使用 CSS3 有什么好处呢?
最明显的就是 CSS3 能让页面看起来非常炫、非常酷,使网站设计锦上添花,但它的好处远远不止这些。
在大多数情况下,使用 CSS3 不仅有利于开发与维护,还能提高网站的性能。与此同时,还能增加网站的可访问性、可用性,使网站能适配更多的设备,甚至还可以优化网站 SEO,提高网站的搜索排名结果。
为什么说 CSS3 能减少开发与维护的成本呢?
先来看一个实例。一个圆角效果,在 CSS2 中需要添加额外的 HTML 标签,要使用一个或者更多图片来完成;而使用 CSS3 只需要一个标签、一个 border-radius 属性就能完成。这样,CSS3 技术能把人们从绘图、切图和优化图片的工作中解救出来。
如果后续需要调整这个圆角的弧度或者圆角的颜色,若使用 CSS2,要从头绘图、切图才能完成,而使用 CSS3 几秒钟就能完成这些工作。
CSS3 还能让我们远离一大堆的 JavaScript 脚本代码或者 Flash,我们不再需要花大把时间去写脚本或者寻找合适的脚本插件并修改以适配网站特效。
最后,有些 CSS3 技术还能帮助简化页面,让结构更加清晰。例如为达到一个效果而嵌套很多 div 标签和类名,这样能有效地提高工作效率、减少开发时间、降低开发成本。例如,制作一个重叠的背景效果,在 CSS 中需要添加 div 标签和类名,在不同的 div 中放一张背景图,现在可以使用 CSS3 的多背景和背景尺寸等新特性,在一个 div 标签就能完成这些工作。
在进行 Web 开发时,减少多余的标签嵌套和图片的使用数量,意味着用户要下载的内容将会更少,页面加载也会更快。另外,更少的图片、脚本和 Flash 文件让 Web 站点减少 HTTP 请求数,这是提升页面加载速度的最佳方法之一。
而使用 CSS3 制作图形化网站无须任何图片,能极大地减少 HTTP 的请求数量,并且提升页面的加载速度。
当然,这取决于釆用 CSS3 特性来代替什么技术,同样还要看如何使用 CSS3 特性。例如,CSS3 的动画效果,能够减少对 JavaScript 和 Flash 文件的 HTTP 请求,但可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,致使用户流失。
因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的现象毕竟很少。