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