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
為何要有前綴?
- 瀏覽器廠商在實(shí)現(xiàn)一些非標(biāo)準(zhǔn)的屬性,可能與以后的正式標(biāo)準(zhǔn)不一樣
- 瀏覽器做的是一些實(shí)驗(yàn)性的實(shí)現(xiàn)
- 如果瀏覽器不適用前綴,開發(fā)者會(huì)認(rèn)為在所有瀏覽器表現(xiàn)都一樣(其實(shí)并不是)
為什么要用前綴?
- 可以提前使用一些很酷的功能
- 在多種環(huán)境中網(wǎng)頁(yè)表現(xiàn)相同
when
Q:怎么知道什么標(biāo)簽需要加呢?
A:http://caniuse.com/ 去查, 或者使用autoprefixer(見 how)
how
最方便的還是autoprefixer,把它加到你的taskRunner里, 或者webpack loader中,寫代碼時(shí)完全不用在意前綴啦~
https://css-tricks.com/how-to-deal-with-vendor-prefixes/
這里是一些其他的解決方案
之前還有用css預(yù)處理器中的mixin實(shí)現(xiàn)的
