[CSS] CSS3 实用指南学习笔记一_html/css_WEB-ITnose

使用 CSS3

渐进增强

在编写 Web 页面时，首先让他们在基础的浏览器和设备上正常工作且展现得当，然后再辅以更高级但非必要的 CSS 和 JavaScript 等增强功能，为当前和未来的浏览器提供更好的支持。

相对于那种一开始就力求完美的编写方式，渐进增强的开发方式更能符合我们的实际情况，用户无论在任何浏览器都能够正确展示，但如果在符合增强方式的浏览器运行时就会展现更加丰富的效果。

提升性能

• 使用 CSS3 能够有效对图片的依赖，比如通过 CSS3 的属性即可实现图片的阴影、圆角效果，而不需再重新设计图片。
• 通过 CSS3 的选择符定位，能够减少对 div 和类的依赖。

更少的标记和图片意味着更快的页面加载速度，能够有效增强用户体验。同时谷歌也将页面速度作为排名的评分标准之一。

明智的使用 CSS3

浏览器前缀

• 当一个浏览器实现了一个新的属性、值或者选择器，而这个特性还未成为候选推荐标准状态的时候，需要在属性前面添加前缀以便它的渲染引擎识别。

• 常见的浏览器前缀

  • -khtml-（现在基本都没有用了，被 -webkit- 取代）
  • -ms-（IE 浏览器）
  • -moz-（Firefox、Camino、Flock浏览器等）
  • -o-（Opera系列浏览器等）
  • -webkit-（Safari、Android、Chrome浏览器等）

• 有前缀的属性会告知开发者这个属性只是实验性质的而且很有可能会发生变化。它给予浏览器在必要时候进行变更的灵活性，这让浏览器能够更快的发布或者重新定义新属性。

• 当属性成为规范后，浏览器也能够正确实现属性，就可以去除这个前缀。如果提供了无前缀的属性定义（向后兼容），那么开发的页面能够自适应最终定义完成的特性。如果没有这样做，页面也能通过旧的前缀属性正常工作。

比如一个 CSS3 的圆角代码，应该这么写：

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/-moz-transform:rotate(-3deg); /*为Firefox*/-ms-transform:rotate(-3deg); /*为IE*/-o-transform:rotate(-3deg); /*为Opera*/transform:rotate(-3deg); /*为nothing*/ 

有些人会觉得向上面一样写那么多重复代码很烦人，那么可以通过 CSS 预处理工具比如 Sass、LESS 等，你只需要书写一行标准属性即可：

transform:rotate(-3deg); /*为nothing*/