Autoprefixer：一個以最好的方式處理瀏覽器前綴的後處理程序

時間 2019-11-18

原文原文鏈接

Autoprefixer解析CSS文件而且添加瀏覽器前綴到CSS規則裏，使用Can I Use的數據來決定哪些前綴是須要的。javascript

全部你須要作的就是把它添加到你的資源構建工具（例如 Grunt）而且能夠徹底忘記有CSS前綴這東西。儘管按照最新的W3C規範來正常書寫你的CSS而不須要瀏覽器前綴。像這樣：css

 
        a{ 
       
        transition :transform  
        1 
        s 
       
        }

Autoprefixer使用一個數據庫根據當前瀏覽器的普及度以及屬性支持提供給你前綴：前端

 
        a{ 
       
        -webkit-transition :-webkit-transform  
        1 
        s; 
       
        transition :-ms-transform  
        1 
        s; 
       
        transition :transform  
        1 
        s 
       
        }

問題java

固然咱們能夠手寫瀏覽器前綴，可是這顯得乏味以及易錯。

咱們也可使用相似 Prefixr這樣的服務以及編輯器插件，但這仍然乏於跟一堆重複的代碼打交道。

咱們可使用象 Compass之於Sass以及 nib之於Stylus之類的預處理器提供的mixin庫。它們能夠解決絕大部分問題，但同時又引入了其餘問題。

它們強制咱們使用新的語法。它們迭代慢於現代瀏覽器，因此當穩定版發佈時會產生不少沒必要要的前綴，有時咱們須要建立本身的mixins。

Compass實際上並無爲你屏蔽前綴，由於你依然須要決定許多問題，例如：我須要爲 border－radius 寫一個mixin嗎？我須要用逗號分割 +transition 的參數嗎？

Lea Verou的 -prefix-free幾乎解決了這個問題，可是使用客戶端庫並非個好注意，當你把最終用戶性能考慮進去的話。爲了防止反覆作一樣的事情，最好是在資源構建或者項目發佈時再構建一次CSS。

揭祕

Autoprefixer是一個後處理程序，不象Sass以及Stylus之類的預處理器。它適用於普通的CSS而不使用特定的語法。能夠輕鬆跟Sass以及Stylus集成，因爲它在CSS編譯後運行。

Autoprefixer基於 Rework，一個能夠用來編寫你本身的CSS後處理程序的框架。Rework解析CSS成有用Javascript結構通過你的處理後導回給CSS。

Autoprefixer的每一個版本都包含一份最新的 Can I Use 數據：

當前瀏覽器列表以及它們的普及度。
新CSS屬性，值和選擇器前綴列表。

Autoprefixer默認將支持主流瀏覽器最近2個版本，這點相似Google。不過你能夠在本身的項目中經過名稱或者模式進行選擇：

主流瀏覽器最近2個版本用「last 2 versions」；
全球統計有超過1%的使用率使用「>1%」;
僅新版本用「ff>20」或」ff>=20″.

而後Autoprefixer計算哪些前綴是須要的，哪些是已通過期的。

當Autoprefixer添加前綴到你的CSS，還不會忘記修復語法差別。這種方式，CSS是基於最新W3C規範產生：

 
         a { 
        
         background : linear-gradient(to  
         top 
         ,  
         black 
         ,  
         white 
         ); 
        
         display : flex 
        
         } 
        
         ::placeholder { 
        
         color :  
         #ccc 
        
         }

編譯成：

 
         a { 
        
         background : -webkit-linear-gradient( 
         bottom 
         ,  
         black 
         ,  
         white 
         ); 
        
         background : linear-gradient(to  
         top 
         ,  
         black 
         ,  
         white 
         ); 
        
         display : -webkit-box; 
        
         display : -webkit-flex; 
        
         display : -moz-box; 
        
         display : -ms-flexbox; 
        
         display : flex 
        
         } 
        
         :-ms-input-placeholder { 
        
         color :  
         #ccc 
        
         } 
        
         ::-moz-placeholder { 
        
         color :  
         #ccc 
        
         } 
        
         ::-webkit-input-placeholder { 
        
         color :  
         #ccc 
        
         } 
        
         ::placeholder { 
        
         color :  
         #ccc 
        
         }

Autoprefixer 一樣會清理過時的前綴（來自遺留的代碼或相似 Bootstrap CSS庫），所以下面的代碼：

 
         a { 
        
         -webkit-border-radius :  
         5px 
         ; 
        
         border-radius :  
         5px 
        
         }

編譯成：

 
         a { 
        
         border-radius :  
         5px 
        
         }

由於通過Autoprefixer處理，CSS將僅包含實際的瀏覽器前綴。 Fotorama從Compass切換到Autoprefixer以後，CSS大小減小了將近20%。

演示

若是你還沒用過任何工具來自動化構建你的靜態資源，必定要嘗試下 Grunt，我強烈推薦你開始使用構建工具。這將開啓你整個語法糖世界，高效的mixin庫以及實用的圖片處理工具。全部開發者的高效方法用來節約大量精力以及時間（自由選擇語言，代碼服用，使用第三方庫的能力）現將都適用於前端開發人員。

讓咱們建立一個項目目錄以及在style.css中寫些簡單的CSS：

style.css

a { }

在這個例子中，咱們將使用Grunt。首先須要使用npm安裝 grunt-autoprefixer ：

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

而後咱們須要建立 Gruntfile.js 文件以及啓用Autoprefixer：

 
          Gruntfile.js 
         
          module.exports =  
          function 
          (grunt) { 
         
          grunt .initConfig ({ 
         
          autoprefixer : { 
         
          dist : { 
         
          files : {  
          'build/style.css' 
          :  
          'style.css' 
          } } }, 
         
          watch : { 
         
          styles : { 
         
          files : [ 
          'style.css' 
          ], 
         
          tasks : [ 
          'autoprefixer' 
          ] 
         
          } 
         
          } 
         
          }); 
         
          grunt.loadNpmTasks( 
          'grunt-autoprefixer' 
          ); 
         
          grunt.loadNpmTasks( 
          'grunt-contrib-watch' 
          );};

此配置文件可讓Autoprefixer編譯 style.css 到 build/style.css. 一樣咱們將用 grunt-contrib-watch 來監聽 style.css文件變化從新編譯 build/style.css。

啓用Grunt的Watch功能：

./node_modules/.bin/grunt watch

如今咱們添加一個CSS3表達式到style.css並保存：

style.css

 
           a { 
          
           width : calc(50% - 2em) 
          
           }

接下來是見證奇蹟的時刻，如今我有了build/style.css文件，Grunt監測到style.css文件發生變化並啓用Autoprefixer任務。

Autoprefixer發現了 calc() 值單元須要Safari 6的瀏覽器前綴。

build/style.css

 
            a { 
           
            width : -webkit-calc( 
            50% 
            -  
            2em 
            ); 
           
            width : calc( 
            50% 
            -  
            2em 
            ) 
           
            }

咱們再添加多一點點複雜的CSS3到style.css並保存：

style.css

 
             a { 
            
             width : calc( 
             50% 
             -  
             2em 
             ); 
            
             transition : transform  
             1 
             s 
            
             }

Autoprefixer已知Chrome，Safari 6以及Opera 15 須要爲 transition及 transform 添加前綴。但IE9也須要爲transform添加前綴，做爲transition的值。

build/style.css

 
              a { 
             
              width : -webkit-calc( 
              1% 
              +  
              1em 
              ); 
             
              width : calc( 
              1% 
              +  
              1em 
              ); 
             
              -webkit-transition : -webkit-transform  
              1 
              s; 
             
              transition : -ms-transform  
              1 
              s; 
             
              transition : transform  
              1 
              s 
             
              }