（基礎）廠商字首

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第3章。

廠商字首

為鼓勵瀏覽器廠商儘早採用W3C的CSS3推薦標準，於是就產生了VSP（Vendor Specific Prefixes，廠商字首）的概念。

有了這些CSS屬性的字首，廠商就可以嘗試實現W3C涵蓋新CSS屬性的工作草案。在迅速實現新屬性的同時，還可以宣告它們是過渡的、部分實現的，或者實驗性的。總之，後果由使用者自負。

就拿W3C推薦的transform屬性為例，標準語法是這樣的：

transform: skewX(-45deg);

然而，由於這個屬性還沒有完全定案，為保證在大多數瀏覽器以及它們的實驗性實現中能夠使用這個屬性，應該針對想要支援的瀏覽器為該屬性新增VSP。每個瀏覽器只使用各自能理解的屬性宣告。

-moz-transform:skewX(-45deg);    /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome及Safari */
-ms-transform:skewX(-45deg);     /* 微軟Internet Explorer */
-o-transform:skewX(-45deg);      /* Opera */
transform:skewX(-45deg);         /* 最後是W3C標準屬性 */

VSP的開頭是一個連字元，然後是字首名，接著又是一個連字元，最後是W3C屬性名。另外要特別注意，在帶字首的屬性宣告之後還要宣告W3C標準屬性，以備將來有瀏覽器實現完整的不帶字首的屬性時派上用場。這裡的Safari和Chrome都使用相同的-webkit-字首，是因為它們都使用Webkit渲染引擎。

以下CSS3屬性必須加VPS：

border-image       translate
linear-gradient    transition 
radial-gradient    background*
transform          background-image*
transform-origin

^{* 針對背景圖片或漸變}

為了節省篇幅，我不會在每個例子中都寫全一套帶VPS的屬性宣告，而只會提醒大家VPS是必要的。隨著瀏覽器的不斷更新，有朝一日，VPS可能就用不著了。有關CSS3和VPS的最新資訊，可以參考這個網站：http://caniuse.com。如果想實現自動新增VPS，可以使用-prefix-free膩子指令碼（polyfill）——參見本書附錄。