基本介紹
- 外文名：Autoprefixer
- 類型：開源工具
- 解析對象：CSS
- 使用規範：W3C規範
- 研發者：Andrey Sitnik
發展歷史,工具特點,使用說明,選項控制,運行環境,配置示例,
發展歷史
2013年4月9日，PostCSS的創作者Andrey Sitnik發布了Autoprefixer的第一個版本0.1.20130409版。它可以給transition等CSS屬性，自動添加各種瀏覽器所需要的前綴，並簡單指定需要支持的瀏覽器版本。
2013年12月22日發布了1.0.20131222版，該版本可以生成或修改如Sass的源映射；輸出於原CSS一樣風格的代碼；支持瀏覽器長名的配置（例如：0.8版的時候只支持縮寫的“ff > 20”，1.0版中增加“firefox > 20”的支持）；其CSS解析器改為PostCSS，可聯合PostCSS同時處理過CSS代碼。
2014年2月18日發布了1.1.20140218版，該版本主要針對源映射進行改進，加強對LESS的支持；此外，還可以將CSS設定為級聯式。
2014年6月10日發布了1.2版，其版本號才開始省略了後面的日期尾數，成為正式版。該版本之前使用的是本地Can I Use庫，而作者還得時時手動更新。從1.2版開始，直接使用caniuse-db官方npm包，解決瀏覽器前綴數據更新延遲的問題。
2014年6月24日的2.0版中，主要把所有和映射相關的設定都放入map中，如“inlineMap: true”改為“map: { inline: true }”；支持CSS3中新增的@supports功能。
2014年7月29日的2.2版中，新增了安全模式，例如可以將“a{”自動解析成“a{}”，主要用於實時輸入工具和歷史遺留代碼；而在一般模式下遇到這種情況，會指明原始碼錯誤的行列數。新增“控制注釋”功能，加上了“/* autoprefixer: off */”的地方會被Autoprefixer略過，並且可以循環嵌套使用“控制注釋”。
2014年8月23日的3.0版中，Autoprefixer分離出“autoprefixer”和“autoprefixer-core”兩個npm包；“autoprefixer”包含了與“autoprefixer-core”相同的接口，但“autoprefixer-core”移除了一些不必要的代碼，命令行界面工具和所有檔案系統代碼及附屬檔案只存在於“autoprefixer”中，外掛程式開發人員只需要使用“autoprefixer-core”即可。另外，原本由CoffeeScript寫的Autoprefixer將重寫為ECMAScript6。
2014年11月14日4.0版本主要新增了“remove: false”功能，使Autoprefixer不會刪除過時前綴。
2015年1月14日的5.0版中，除了此前使用的PostCSS，還使用了Browserslist庫，使得Autoprefixer對瀏覽器的版本可以做更精確地設定，例如針對美國瀏覽器的使用情況設定“> 5% in US”。
2015年9月4日發布了6.0版，移除了命令行界面至“autoprefixer-cli”，而推薦使用的是“postcss-cli”；由於微軟的Edge和IE屬於兩種不同的瀏覽器，新增“not”功能加以區分；另外針對Safari做了新的瀏覽器前綴的改進。之後的6.X版本中還持續進行了較多的更新，如6.1和6.2中對transition的支持和改進；6.3可自定義瀏覽器策略；6.7新增對Electron框架的支持。
2017年5月6日發布了7.0版，使用了PostCSS 6.0、Browserslist 2.0和caniuse-lite，而Autoprefixer通過轉換工具全部轉為了ES6，所有的原始碼改為了JS編寫。
2018年2月12日發布了8.0版，對瀏覽器的支持方面主要在於Browserslist 3.0的改變：對默認瀏覽器的限制從1%減小到0.5%，並且從中移除了“死瀏覽器”（指全球市場占比小於1%且不再維護的瀏覽器，如：IE10、黑莓瀏覽器）；改變了查詢目標瀏覽器和使用前綴的命令；以及移除了對CSS屬性的更正（因為PostCSS其他外掛程式可以現實，而Autoprefixer只針對前綴處理即可）。
2018年7月17日發布了9.0版，使用PostCSS 7.0，支持Browserslist 4.0，移除了對不再安全更新的Node.js 4和Node.js 9的支持。
2020年9月16日發布了基於PostCSS 8的10.0版，移除對Node.js 6.x, 8.x, 11.x的支持。從此版本，需要使用“npm install --save-dev autoprefixer postcss”來安裝Autoprefixer。並由於新的PostCSS外掛程式指南，將postcss從dependencies移至peerDependencies。
工具特點
1. 寫純淨的CSS
Autoprefixer是自動處理的，使用者不需要學習一種特殊的語言（比如Sass）或者記住必須在哪裡使用mixins。且Autoprefixer是CSS的一個後處理程式，可以用它來處理像Sass、Stylus、LESS這些預處理程式。
Autoprefixer支持選擇器（如:fullscreen和::selection）、單元函式（calc()）、at-rules（@support和@keyframe）和屬性。
2.使用最新的規則
Autoprefixer默認使用Can I Use的最新數據，可以只添加必要的瀏覽器前綴。另外，它還可以從CSS中刪除過時的、不必要的前綴（比如許多CSS庫生成的border-radius前綴）。
使用說明
示例
Autoprefixer使用基於當前瀏覽器流行度和屬性支持的數據來管理前綴，例如：
::placeholder {
color: gray;}
自動替換為：
::-webkit-input-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
瀏覽器
Autoprefixer使用Browserslist，可以通過像“last 2 versions”或“> 5%”這樣的查詢來指定瀏覽器。指定瀏覽器的最好方式是通過配置.browserslistrc，或者指定package.json中的browserslist值，並把它們放在項目的根目錄下，不過這將與其他工具共享（比如babel-preset-env、Stylelint）瀏覽器配置。
指定功能
默認情況下，Autoprefixer會刪除過時的前綴，但可以使用“remove: false”選項禁用此行為，這個選項將使Autoprefixer的速度提高10%。設定“flexbox: false”會禁用flexbox屬性的前綴，或者“flexbox:"no-2009"”只會為最新版本和IE版本瀏覽器添加前綴。其他設定詳見“選項控制”目錄。
如果Autoprefixer在非前綴和已有前綴屬性之間添加了新的前綴，破壞了預期的前綴順序，可以選擇把CSS中所有前綴先清除，然後再添加必要的前綴：
var cleaner = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
var prefixer = postcss([ autoprefixer ]);
cleaner.process(css).then(function (cleaned) {
return prefixer.process(cleaned.css);
}).then(function (result) {
console.log(result.css);
});
控制注釋
如果在CSS的某些部分不需要自動檢測，可以使用控制注釋來禁用Autoprefixer。在下面的示例中，將在整個b規則範圍內Autoprefixer，而不僅僅是在注釋之後：
a {
transition: 1s; /* it will be prefixed */
}
b {
/* autoprefixer: off */
transition: 1s; /* it will not be prefixed */
}
還可以遞歸地使用注釋：
/* autoprefixer: off */
@supports (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
在Sass/SCSS中，可以使用以上所有禁用選項，只需在注釋開始時添加一個感嘆號：/*! autoprefixer: off * /。
特殊情況
許多其他工具也包含Autoprefixer。例如，webpack通過清理不必要的前綴來使用自動修復程式來壓縮CSS。如果將瀏覽器列表設定為通過browsers選擇的Autoprefixer，那么只有第一個Autoprefixer才知道使用者的瀏覽器情況，webpack內部的Autoprefixer將使用默認的瀏覽器列表。結果會變成webpack移除了Autoprefixer自動添加的前綴。可以將browserslist配置放在項目根目錄下解決此問題。
Autoprefixer需要無前綴的屬性來添加前綴。因此，如果只寫-webkit-gradient而沒有W3C的gradient，Autoprefixer將不會添加其他前綴。不過PostCSS有一個外掛程式可以將CSS轉換為無前綴的狀態，在運行Autoprefixer之前使用postcss-unprefix即可。
選項控制
Autoprefixer可用的選項有：
- browsers(array)：項目支持瀏覽器查詢列表（如：last 2 versions），建議在package.json中配置browserslist，而不是和其他工具來共享瀏覽器設定。
- env(string)：browserslist環境。
- cascade(boolean)：如果CSS是未壓縮的，Autoprefixer將使用Visual Cascade，默認值為true。
- add(boolean)：Autoprefixer將添加瀏覽器前綴，默認值為true。
- remove(boolean)：Autoprefixer將移除過時的瀏覽器前綴，默認值為true。
- supports(boolean)：Autoprefixer將為@supports參數添加前綴，默認值為true。
- flexbox(boolean|string)：Autoprefixer將為flexbox參數添加前綴，默認值為true。設定值為"no-2009"時，只會為最新版本和IE版本瀏覽器添加前綴。
- grid(boolean)：Autoprefixer將為Grid布局參數添加IE前綴，默認值為false。
- stats(object)：根據瀏覽器使用者統計數據來進行瀏覽器查詢（如：> 10% in my stats）。
運行環境
在Gulp中，可以使用帶有Autoprefixer NPM包的Gulp-postcss，也可以和其他PostCSS外掛程式同時使用：
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer() ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
});
在Webpack中，可以使用帶有Autoprefixer的postcss-loader或其他PostCSS外掛程式：
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
在Grunt中，可以使用帶有Autoprefixer NPM包的grunt-postcss，也可以和其他PostCSS外掛程式同時使用：
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
其他編譯工具：
- Ruby on Rails：autoprefixer-rails
- Neutrino：neutrino-middleware-postcss
- Jekyll：添加autoprefixer-rails和jekyll-assets到Gemfile
- Brunch：postcss-brunch
- Broccoli：broccoli-postcss
- Middleman：middleman-autoprefixer
- Mincer：添加Autoprefixer NPM包並啟動environment.enable('autoprefixer')
預處理程式：
- Less:less-plugin-autoprefix
- Stylus:autoprefixer-stylus
- Compass:autoprefixer-rails#compass
GUI工具：
- CodeKit
- Prepros
可以使用postcss-cli在CLI中運行Autoprefixer：
npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/
可以在Node.js中使用帶有PostCSS的Autoprefixer，或者為Autoprefixer開發一個新的環境：
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
postcss([ autoprefixer ]).process(css).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
console.log(result.css);
})
也可以使用HTML-autoprefixer來處理帶有內聯CSS的HTML。
還有非Node.js環境下的為瀏覽器獨立構建的JS。
配置示例
1. 安裝Autoprefixer
命令行界面輸入：sudo npm install autoprefixer -g
註：sudo和全局安裝（-g）需要針對不同環境，windows系統不需要加sudo命令
2. 安裝postcss-cli
命令行界面輸入：sudo npm install postcss-cli -g
3. 配置External Tools
打開Webstorm設定，Preferences -> Tools -> External Tools，點擊新增按鈕，如圖：
填寫具體配置，例如圖片所示：
Webstorm配置示例
Program：填入postcss-cli的PATH；
Parameters:-u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$ （1根據自己的需要配置）
Working directory :$ProjectFileDir$
配置好後，在css或sass檔案中右鍵，就可以在右鍵選單中看到External Tools – autoprefixer
4. 設定快捷鍵
打開Webstorm設定，Preferences -> Keymap，搜尋External Tools，配置Autoprefixer即可。
註：windows下可以直接用Autoprefixer的PATH，具體配置如下：
IntelliJ IDEA配置示例
