如何對付各種不同的 CSS 供應商前綴（Vendor Prefixes）？

這裡介紹如何對付各種不同的 CSS 供應商前綴（vendor prefixes），讓網頁開發更有效率。

在使用 CSS 設計網頁時，多多少少都會遇到需要處理不同瀏覽器之間的相容性問題，其中一個很棘手的問題就是 CSS 的供應商前綴，為了要使每一種瀏覽器都支援你寫的 CSS 程式碼，你必須依照各種不同的瀏覽器加上它們專屬的供應商前綴，以確保該 CSS 可以被正常執行。

舉例來說，在使用 CSS 的動畫（animation）功能時，animation 相關的屬性就必須要加上 -webkit- 與 -moz- 這類的供應商前綴，確保不同的瀏覽器都可以支援，動畫關鍵影格（keyframes）at-rule 的部分，也要加上供應商前綴，變成類似 @-webkit-keyframes 與 @-moz-keyframes 這樣的型式，這裡最麻煩的地方就是每一個 CSS 屬性與每一個供應商前綴的組合都要寫出來，如果只是一兩行程式的話是還好，但是通常一個內容比較豐富的網頁，這類的 CSS 會非常多，這個時候要處理這些供應商前綴就是一個大問題。

要如何正確使用各種 CSS 屬性與各種供應商前綴是個很重要的問題，以下我們介紹一些簡化與自動化的 CSS 供應商前綴處理工具，讓 CSS 網頁設計者可以減輕這方面的負擔。

手工打造的 CSS

如果你習慣使用一般的文字編輯器編寫 CSS 程式碼，那麼你也就必須要自己處理供應商前綴的問題，而這樣的做法也會比較容易出錯，不過大部分的網站設計者也都是這樣做的。

在這樣的狀況下，你可以考慮使用 CSS3 Please 這個線上 CSS 編輯工具，它提供了一個符合最新標準的 CSS 範本，你可以在這個編輯器中依照自己的需求調整 CSS 設定，調整好之後再用複製與貼上的方式把完成的程式碼放進自己的網頁中。

不過由於 CSS 的標準會隨著時間不斷演進，如果使用這樣的方式來撰寫 CSS 程式碼，日後也必須靠自己檢查這些程式碼是否符合最新的標準，不過這也是大部分網站都有的問題。

使用 JavaScript 自動解決供 CSS 應商前綴問題

如果你習慣以徒手撰寫 CSS 程式碼，但是沒有使用供應商前綴的習慣，那麼 -prefix-free 對你來說就會很有用，它是一個 JavaScript 工具，可以自動檢查網頁中的 CSS 程式碼，將必要的供應商前綴自動加上去，讓整個 CSS 設定可以正常被瀏覽器執行。

由於 -prefix-free 是使用 JavaScript 去動態更改 CSS 程式碼，所以在網頁載入時那些正在被 -prefix-free 更動的網頁元素可能會產生跳動的狀況（因為 CSS 設定在變動），不過這個現象通常只是一瞬間而已，另外如果瀏覽器的 JavaScript 被使用者關掉了，CSS 也會無法正常顯示（不過這個情況可能比較少見），你可以自己評估這些優缺點，看看是否要使用這個工具。

除了 -prefix-free 之外，其實 jQuery 的 .css() 函數也有類似的功能：

$("body").css({
  // 不會加上前綴
  "background": "linear-gradient(#ccc, #666)",

  // 不需要加前綴，所以也不會變動
  "box-shadow": "inset 0 0 5px black",

  // 會自動加上前綴
  "transform" : "rotate(5deg)"
});

我個人是沒有習慣使用 JavaScript 來處理 CSS 的問題，但是也很難說什麼時候會用到，多了解一些總是比較好的。

使用線上工具修正 CSS 供應商前綴

如果要解決 CSS 的供應商前綴問題，又不想使用上面的 JavaScript 工具動態修正 CSS 程式碼的話，可以在把 CSS 貼上網頁之前，先使用 Prefixr 這類的線上工具檢驗一下 CSS 程式碼，如果自己寫的 CSS 程式碼有遺漏一些供應商前綴，它就會自動幫你補上去。

這個 CSS 檢查工具很聰明，你不一定要提供完全沒有供應商前綴的 CSS 程式碼給它，它會自動檢查整個 CSS 設定並且找出遺漏的部分再幫你補上去，假設一個 CSS 屬性有三種前綴，而你只寫了兩種，這樣的狀況它就會幫你補上漏掉的那一種。

像這類的工具網路上其實有很多，你可以選擇自己用起來比較順手的來使用，像 prefixMyCSS 與 CSSPrefixer 也都是差不多的工具。

Prefixr 除了可以在網頁上使用之外，它也有提供其他各種不同的 API，例如命令列、Sublime Text 2 等。

使用前處理器（Preprocessors）

一些 CSS 前處理器也可以幫你解決供應商前綴的問題，如果你有使用 Sass 的話，Compass 或 Bourbon 中有一些強韌的 CSS3 mixins 可以使用。

如果是使用 LESS 的話，可以使用 CSS-Tricks 提供的 mixins，或是參考這裡。

常見問題

有些人在使用 CSS 撰寫網頁時，會因為不太清楚哪一些 CSS 屬性需要加上前綴，索性直接把所有的屬性都加上各種主要的供應商前綴，有時候就會出現類似 -o-border-radius 這樣根本不存在的 CSS 屬性，這個問題是初學者應該要注意的。

另外一個常見的問題就是使用過時的 CSS 屬性，就像上面提過的，如果是自己徒手撰寫的 CSS 程式碼，過了一段時間之後就要注意這些 CSS 是否已經過時。

參考資料：CSS-Tricks