Vendor Prefix:为什么需要浏览器引擎前缀

标签: 技术技巧 css3 Vendor Prefix 浏览器前缀 浏览器引擎前缀 | 发表时间:2014-04-30 10:54 | 作者:歪脖骇客
出处:http://www.webhek.com

浏览器引擎前缀(Vendor Prefix)是什么?

Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。

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

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

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

这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。可以总结为以下3点:

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

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

  -moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
   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)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:

/* 简单属性 */
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

Internet Explorer

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

IE6到IE8都不支持CSS3,很遗憾的是,使用这些低版本浏览器的用户还很多。所以,确保你的网站设计在不支持CSS3的情况下也能正常显示。对于一些属性: border-radius , linear-gradient, 和 box-shadow, 你可以使用 CSS3Pie,它是一个很小的文件,把它放到你的网站的根目录下,就能让你的页面中IE6,IE8中也支持这些属性。

相关 [vendor prefix 需要] 推荐:

Vendor Prefix:为什么需要浏览器引擎前缀

- - WebHek
浏览器引擎前缀(Vendor Prefix)是什么. Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效. 谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎.

Google 需要性爱

- cantrip - 酷壳 - CoolShell.cn
看到一篇趣文Google Needs Sex,翻译过来. Brad DeLong 给我们写了 两篇关于“Google遇到的麻烦”的文章(墙),这两篇文章基本上是说, 制造网络欺诈和网络垃圾信息的人会尽其一切努力来和搜索引擎进行博弈,这样一来,其会让搜索到的结果对我们越来越没有帮助(译注:百度的竞价排名成为了制造网络欺诈和网络垃圾信息甚至洗脑的温床).

都需要过程

- Terence - 左岸读书_blog
我一直相信,这个世界所有的事情都建立在一定的规则之上,最根本的规则. 其上一切规则都要依次规则,一旦上层规则违背了底层的规则,则必然会出现问题. 而那些根本的规则,其实在最初我们就已经知道,只是无法意识到. 记得有一句好象是说:最初,看山是山,看水是水;然后,看山不是山,看水不是水;最后才发现,山仍然山,水仍然是水.

谁需要瓢虫保镖?

- bill - 科学松鼠会
如果你觉得上面的图是瓢虫在抱蛋或抱蛹~那么你弄错了. 在瓢虫身体下面的其实是瓢虫茧蜂​​(Dinocampus coccinellae)的蛹. 瓢虫茧蜂会下蛋在瓢虫身上(它们尤其热爱七星瓢虫),然后瓢虫茧蜂会开始在瓢虫里面成长,但是不会杀死瓢虫. 直到他们要化蛹的时候,他们才会由瓢虫的腹部钻出来,并在瓢虫(仍然活着)的六足之间吐丝结蛹.

你不需要iPhone 4S

- 鹏 - 译言-每日精品译文推荐
  人已沦为他们制造的工具的工具.  你们中很多人都看过新推出的iPhone 4S的视频和评论;的确,它看起来很酷. 的确,它光鲜诱人,拥有高级摄像头、个人助理、更好的屏幕等配置. 但是,和昨天或5年前一样,你今天并不需要它. 昨天,没有新的iPhone,你过得很好. 没有新的iPhone,你们中的很多人都很快乐和满足,甚至可以专注于工作和享受生活.

减肥需要加营养

- - 范志红_原创营养信息
若说一年中最有减肥压力的时候,那肯定要数5月了. 风和日暖,衣装轻薄,本是曼妙身材曲线毕露的时刻. 然而,这时候的穿衣也最为烦恼——女性看看原来的纤腰上增加了两道游泳圈,男性看看胸前腹部凸起的三片高原,郁闷之余,又会开始新的减肥历程. 一位朋友咬牙切齿地告诉我,美丽的连衣裙穿不进了,5月份开始要对自己狠一点,天天称量体重,严格节食减肥,什么有营养的东西都不吃.

写作不需要天才,但需要找对方法

- - 白板报
如果写的是鸿篇巨制,例如长篇小说,史诗巨构,或者是诗歌,那天赋显然是需要的. 如果写的只是散文、随笔、应用文、小品文、短篇小说、中篇小说,或者是电影剧本,甚至电视连续剧,那么可以通过努力和训练,达到合格以上的水平,而并不需要太多的天才. 自古以来,写作这件事被搞得很精致,也很神秘,有些过度精致,神秘得有点近乎巫术了.

因为 iPad,我不再需要 iPhone

- Jim - 爱范儿 · Beats of Bits
John Brownlee 是一位 iPhone 3GS 和 iPad 用户. 在一次外出的过程中,他的 iPhone 再次不慎遗失. 不过这一次他没有慌乱,甚至没有试图去找回 iPhone,而是购买了一台 feature phone —— 诺基亚 C3-00. 没有受困于功能的落后,John 很喜欢 C3-00.

Google+完胜Facebook需要的三步骤

- 荒箬 - cnBeta.COM
Google+发布,目标很显然是已经红了很久的facebook. 第一眼看上去,Google + 整体界面比facebook 简单的多也紧凑的多,但是,它提供了更加真实的人际交互平台,让人们更乐于其中. 通过Google + 提供给我们的,正在聊天的人和其所处环境的信息,人们在交往过程中便消除了因为地理距离带来的陌生感,使人们间的联络上升为一种感情上愉悦的体验.

亮点,我们需要亮点 [118P]

- chh - 乐淘吧
主银 虽然你喜欢乌龟 但是 轮家是狗狗. 这么好的商场呀  真想去看看. 现在流行这种宠物哦  带着出去散步  忒霸气了. 十一区 永远是一个神秘的国度. 逛街看到商店卖的台灯  好想上去弹一下啊. 有道  你让 oppo 跟步步高  情何以堪啊. 地震后的场面 说明天朝除了豆腐渣 也有好工程的 只是不是老百姓住的.