CSS3 prefix

CSS3 的許多屬性尚未成為標準
所以各個瀏覽器有不同的處理方式
必須要加上不同的 Prefix 才能讓瀏覽器看懂

常用的有這幾種

-webkit-   用在 Chrome 跟 Safari
-moz-   用在 Firefox
-o-   用在 Oprea
-ms-   用在 Firefox

有瀏覽器前綴字的要寫在一般屬性前面讓瀏覽器先讀:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;

這樣每次寫一長串真的很麻煩啊
所以有人開發了 prefix-free 工具
來事先對 CSS 檔處理並加入 prefix 變成 style 放在 HTML head

prefix-free
http://leaverou.github.io/prefixfree/

auto-prefixer
https://github.com/ai/autoprefixer

要方便也可以使用 compass

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s