請教下 autoprefixer 和 cssnext 分別有什麼用處？有什麼區別？

---

Autoprefixer

顧名思義，這是一個根據你需要兼容的瀏覽器版本來自動增加前綴的工具，數據來自 http://caniuse.com， 這裡有一個在線演示的地址，一看就明白了。http://output.jsbin.com/gufoko/quiet

Options: 中填寫 &> 0% 可以輸出所有前綴，實際項目中推薦填寫具體的瀏覽器版本，比如我常用的配置是：

const browserOptions = {
browsers: [
"last 3 versions",
"ie &>= 10",
"ie_mob &>= 10",
"ff &>= 30",
"chrome &>= 34",
"safari &>= 6",
"opera &>= 12.1",
"ios &>= 6",
"android &>= 4.4",
"bb &>= 10",
"and_uc 9.9",
]
}


輸入：

.foo {
transition: .3s;
}


輸出：

.foo {
-webkit-transition: .3s;
transition: .3s;
}


絕大多數項目我們已經可以拋棄 -moz-, -ms-, -o- 前綴了。

cssnext

這是一個面向未來的 CSS 語法轉譯工具，其實現的所有功能大部分都是有 W3C 草案的。但實際上很多功能不是太好用，比如 #rrggbbaa 這個 CSS Color L4 中定義的十六進位半透明色值，寫個 rgba(0, 0, 0, 0.5) 還得轉換為 #00000080。

功能大致就是官網列舉的這些：

Autoprefixer 和 cssnext 都是 PostCSS 的插件，而 cssnext 中引入了Autoprefixer 而已，就醬(&>^ω^&<)。

---

Autoprefixer

根據 Can I use 的 數據，按需給無前綴代碼自動加廠商前綴。

輸入：

a {
display: flex;
}


輸出：

a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}


cssnext

CSS 的轉譯器（transpiler），根據目前仍處於草案階段、未被瀏覽器實現的標準把代碼轉譯成符合目前瀏覽器實現的 CSS。類似 ES6 的 Babel。轉譯時因為也要處理前綴問題，所以直接依賴了 Autoprefixer 來做這個部分。

輸入：

/* custom selectors */
@custom-selector --heading h1, h2, h3, h4, h5, h6;
--heading { margin-top: 0 }

/* filters */
.blur {
filter: blur(4px);
}


輸出：

/* custom selectors */
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0 }

/* filters */
.blur {
filter: url("data:image/svg+xml;charset=utf-8,&
-webkit-filter: blur(4px);
filter: blur(4px);
}


兩者都是基於 CSS 處理框架 postcss 的（postcss 就是 Autoprefixer 的作者把 Autoprefixer 從另一個 CSS 處理框架 rework 中遷移出來時搞的）。

相比之下，Autoprefixer 更加具有實用價值，而 cssnext 實現的功能以後瀏覽器會怎麼實現還存疑，感覺只能玩玩。

---

倆都不懂，偶湊熱鬧的。

這玩意花點時間看下GitHub 上項目文檔不就好了。

簡單來說

1. autoprefixer 只加前綴

2. cssnext 依賴 autoprefixer(core) ，並附帶其他功能：

Features

1. automatic vendor prefixes

2. custom properties var() limited to :root,

3. reduced calc() to optimize previously parsed var() references,

4. custom media queries a nice way to have semantic media queries,

5. media queries ranges that allows to replace min-/max- with &<= &>= (syntax easier to read),

6. custom selectors to create your own selectors,

7. color() a color function to modify colors,

8. hwb() similar to hsl() but easier for humans to work with,

9. gray() ,

10. #rrggbbaa,

11. rebeccapurple,

12. font-variant properties,

13. filter properties

14. rem units

---

這個還是邀請 @一絲 姐姐來回答更為準確。我初步僅了解autoprefixer是後處理器中的一部分，而cssnext也是一個後處理器（似乎類似於PostCSS）。詳細的得問 @一絲 姐姐。

---

推薦閱讀：