精简翻译David Walsh的博客"CSS Vendor Prefixes"（第三方前缀）

翻译David Walsh的博客"CSS Vendor Prefixes"

一.什么是Vendor Prefixes

vendor prefixes是注入到CSS属性中的小字符串。主要是为了控制确保其修饰的属性只在所控制的浏览器引擎中展现出来。

vendor prefixes有以下几种

webkit: -webkit

Firefox: -moz

Opera: -o

Internet Explorer: -ms

二.为什么使用vendor Prefixes

1实现早期的可能不在用的一些CSS属性。

2提供早期的标准属性的实现。

3提供跟标准不一样的可选语法

三.目前已经使用过的或者正在使用vendor Prefixes有以下几种，这些属性可能会一直增加。

• @keyframes
• transition and transform properties   (transition-property, transition-duration, transition-timing-function, transition-delay)
• animation properties (animation-name, animation-duration, animation-timing-function, animation-delay)
• border-radius
• box-shadow
• backface-visibility
• column properties
• flex properties
• perspective properties

比如

四.怎么使用Vendor Prefixes

使用的是最好是先放浏览器前缀（browser-prefixes）,然后再放属性名字和属性值

如下

/* use of keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

/* use of basic properties */
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	animation-name: fadeIn;
}

当标准可用的时候就用标准，否则的话带有vendor prefixes的属性才会起作用

原文链接

http://davidwalsh.name/vendor-prefixes