因為CSS3還未成為真正的標準,許多瀏覽器對其的支援程度不同,而且每個瀏覽器廠商對同一個樣式支援的寫法也不同,所以要加前綴來達到各個瀏覽器相容。 css3前綴就是用來確保新屬性可以在特定的瀏覽器渲染引擎下被辨識和生效。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
使用過CSS3屬性的同學都知道,CSS3屬性都需要帶各瀏覽器的前綴,甚至到現在,還是還有很多屬性需要帶前綴。這是為什麼呢?
瀏覽器廠商以前就一直在實作CSS3,但它還未成為真正的標準。
因為css3很多屬性還沒確定下來,標準規格還沒發布,許多瀏覽器支援的程度也不同,而且每個瀏覽器廠商同一個樣式支援的寫法也不同,所以要加前綴來要達到各個瀏覽器相容,將來統一了規範就不用寫前綴了。
css3前綴就是用來確保這種屬性可以在特定的瀏覽器渲染引擎下被辨識和生效。
前綴 | #瀏覽器 | 內核 |
---|---|---|
- ms- | IE瀏覽器 | Trident核心 |
-moz- | Firefox | Gecko核心 |
-o- | Opera | Presto核心 |
-webkit- | Chrome和Safari | Webkit核心 |
目前已有很多私有前綴可以不寫了,但為了相容舊版的瀏覽器,可以仍沿用私有前綴和標準方法,逐漸過渡。
來看一個簡單的範例,早期寫一個圓角border-radius ,需要這樣寫:
.box { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
這些是為了相容於舊版的寫法,該瀏覽器不支援新屬性而導致使用者體驗友善度降低;比較新版本的瀏覽器都支援直接寫入:border-radius。
使用前綴則能很好地匹配到較低版本的瀏覽器,並且正常顯示樣式。
(學習影片分享:css影片教學)
以上是為什麼css3要加前綴的詳細內容。更多資訊請關注PHP中文網其他相關文章!