翻译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的属性才会起作用
