使用 CSS3

渐进增强

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

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

提升性能

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

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

明智的使用 CSS3

浏览器前缀

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

    • -khtml-(现在基本都没有用了,被 -webkit- 取代)
    • -ms-(IE 浏览器)
    • -moz-(Firefox、Camino、Flock浏览器等)
    • -o-(Opera系列浏览器等)
    • -webkit-(Safari、Android、Chrome浏览器等)
  • 有前缀的属性会告知开发者这个属性只是实验性质的而且很有可能会发生变化。它给予浏览器在必要时候进行变更的灵活性,这让浏览器能够更快的发布或者重新定义新属性。

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

比如一个 CSS3 的圆角代码,应该这么写:

要注意的是,当使用浏览器的前缀属性时,总应该包含无前缀的属性并把它放到最后,这样可以确保当浏览器可以支持无前缀属性的时候,这个属性就能够生效。

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

但是需要注意的是,如果一种浏览器对某个属性的实现仍然存在缺陷时,你没法再不适用这种浏览器前缀的同时仍然使用其他浏览器的前缀。并且添加脚本也会影响页面访问速度。实用预处理工具隐藏前缀还有一个隐患就是开发者自己可能都会忘记正在使用的是一个不稳定的特性,而把属性当成稳定的特性。

接受差异

处理不支持的浏览器的最佳方法就是直接接受视觉表现上的差异。这就是渐进增强的核心思想。即使能够找到替代方案的时候,也应该考虑是否有必要这么做?实现这个效果能够增加订阅量?营业额?能够帮助用户?根据多方面的考虑作出的决定才是最合适的。
除非页面导致了负面效果,否则在某些页面根本不需要做额外的工作区保证个浏览器间一致的表现。

发表评论

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