CSS3 Vendor Prefix

Vendor Prefix 是什么?

Vendor prefix,指浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。

其中谷歌浏览器和 Safari 浏览器使用的是 WebKit 渲染引擎,火狐浏览器使用的是 Gecko 引擎,Internet Explorer 使用的是 Trident 引擎,Opera 以前使用 Presto 引擎,后改为 WebKit 引擎。


浏览器引擎前缀(Vendor Prefix) 有哪些?

  • moz- / 火狐等使用Mozilla浏览器引擎的浏览器 /
  • webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
  • o- / Opera浏览器(早期) /
  • ms- / Internet Explorer (不一定) /

为什么需要浏览器引擎前缀(Vendor Prefix)?

这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。

可以总结为以下3点:

  • 试验一些还未成为标准的的CSS属性 —— 也许永远不会成为标准
  • 对新出现的标准的CSS3属性特征做实验性的实现
  • 对CSS3中一些新属性做等效语义的个性实现

这些前缀并非所有都是需要的,但通常你加上这些前缀不会有任何害处——只要记住一条,把不带前缀的版本放到最后一行:

  1. -moz-border-radius: 10px;
  2. -webkit-border-radius: 10px;
  3. -o-border-radius: 10px;
  4. border-radius: 10px;

有些新的 CSS3 属性已经试验了很久,一些浏览器已经对这些属性不再使用前缀。border-radius 属性就是一个非常典型的例子。最新版的浏览器都支持不带前缀的 border-radius 属性写法。


需要使用 Vendor Prefixes 的 CSS3 属性

主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括:

  • @keyframes
  • 移动和变换属性 (transition-property, transition-duration, transition-timing-function, transition-delay)
  • 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
  • border-radius
  • box-shadow
  • backface-visibility
  • column 属性
  • flex 属性
  • perspective 属性

完整的列表不只这些,而且还会增加。


浏览器引擎前缀 (vendor-prefix) 的用法

当需要使用浏览器引擎前缀(vendor-prefix)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:

  1. /* 简单属性 */
  2. .myClass {
  3. -webkit-animation-name: fadeIn;
  4. -moz-animation-name: fadeIn;
  5. -o-animation-name: fadeIn;
  6. -ms-animation-name: fadeIn;
  7. animation-name: fadeIn; /* 不带前缀的放到最后 */
  8. }
  9. /* 复杂属性 keyframes */
  10. @-webkit-keyframes fadeIn {
  11. 0% { opacity: 0; } 100% { opacity: 0; }
  12. }
  13. @-moz-keyframes fadeIn {
  14. 0% { opacity: 0; } 100% { opacity: 0; }
  15. }
  16. @-o-keyframes fadeIn {
  17. 0% { opacity: 0; } 100% { opacity: 0; }
  18. }
  19. @-ms-keyframes fadeIn {
  20. 0% { opacity: 0; } 100% { opacity: 0; }
  21. }
  22. /* 不带前缀的放到最后 */
  23. @keyframes fadeIn {
  24. 0% { opacity: 0; } 100% { opacity: 0; }
  25. }
Internet Explorer

Internet Explorer 9 开始支持很多(但并不是全部) CSS3 里的新属性。比如,你也可以在 IE 里使用不带浏览器引擎前缀(vendor-prefix)的 border-radius 属性。

分类导航