vender prefix : css浏览器前缀

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实现的