Autoprefixer解析CSS文件并且添加瀏覽器前綴到CSS規(guī)則里,使用Can I Use的數(shù)據(jù)來決定哪些前綴是需要的。所有你需要做的就是把它添加到你的資源構(gòu)建工具(例如 Grunt)并且可以完全忘記有CSS前綴這東西。盡管按照最新的W3C規(guī)范來正常書寫你的CSS而不需要瀏覽器前綴。
autoprefixer安裝方法
像這樣:
a{ transition :transform 1s }
Autoprefixer使用一個(gè)數(shù)據(jù)庫(kù)根據(jù)當(dāng)前瀏覽器的普及度以及屬性支持提供給你前綴:
a{ -webkit-transition :-webkit-transform 1s;
transition :-ms-transform 1s; transition :transform 1s }
Autoprefixer使用
使用Sass、LESS、Stylus或者其他類似的工具都是屬于CSS的前處理器(Preprocessor),而Autoprefixer則是一種后處理器(Postprocessor)。它是直接針對(duì)CSS本身來進(jìn)行處理,不需要任何額外的語(yǔ)法。因?yàn)樗窃贑SS代碼產(chǎn)生之后才進(jìn)行后續(xù)處理。
Autoprefixer是以Rework這種架構(gòu)所發(fā)展的CSS后處理器,他是將CSS代碼解析后轉(zhuǎn)成JavaScript的資料結(jié)構(gòu),進(jìn)行處理后再產(chǎn)生新的CSS代碼。
Autoprefixer會(huì)分析CSS代碼,并且根據(jù)Can I Use所提供的資料來決定要加上哪些瀏覽器前綴,而你要做的事情就是把他加入自己的自動(dòng)化開發(fā)工具中(比如Grunt或者Gulp),然后就可以直接使用W3C的標(biāo)準(zhǔn)來寫CSS,不需要加上任何瀏覽器的私有前綴。
接下來看看如何使用自動(dòng)化工具實(shí)現(xiàn)Autoprefixer功能。
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版