what
vender prefix 是加在css前的前缀, 就像下面这样
-webkit- (Chrome, Safari, newer versions of Opera.)
-moz- (Firefox)
-o- (Old versions of Opera)
-ms- (Internet Explorer)
.example {
display: flex;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
---------------------------add prefix -------------------------------------
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
why
为何要有前缀?
- 浏览器厂商在实现一些非标准的属性,可能与以后的正式标准不一样
- 浏览器做的是一些实验性的实现
- 如果浏览器不适用前缀,开发者会认为在所有浏览器表现都一样(其实并不是)
为什么要用前缀?
- 可以提前使用一些很酷的功能
- 在多种环境中网页表现相同
when
Q:怎么知道什么标签需要加呢?
A:http://caniuse.com/ 去查, 或者使用autoprefixer(见 how)
how
最方便的还是autoprefixer,把它加到你的taskRunner里, 或者webpack loader中,写代码时完全不用在意前缀啦~
https://css-tricks.com/how-to-deal-with-vendor-prefixes/
这里是一些其他的解决方案
之前还有用css预处理器中的mixin实现的
