DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 1.2 浏覽器私有前綴
1.2 浏覽器私有前綴
編輯:CSS3基礎     

一、浏覽器私有前綴簡介

各大主流浏覽器

由於CSS3很多屬性尚未成為W3C標准的一部分,因此每種內核的浏覽器都只能識別帶有自身私有前綴的CSS3屬性。我們在書寫CSS3代碼時,需要在屬性前加上浏覽器的私有前綴,然後該種內核的浏覽器才能識別相應的CSS3屬性。

CSS3浏覽器私有前綴 私有前綴 對應的浏覽器 -webkit- chrome和safari -moz- Firefox -ms- IE -o- opera

舉個例子,假如我們想要使用CSS3實現半徑為10px的圓角效果的話,可能會這樣寫:

 
border-radius:10px;

但是並非所有浏覽器都能識別border-radius這個屬性,例如chrome浏覽器只能識別-webkit-border-radius(前綴為-webkit-),而firefox浏覽器只能識別-moz-border-radius(前綴為-moz-)。因為為了讓主流浏覽器都能實現圓角效果,我們需要這樣寫:

 
border-radius:10px;
-webkit-border-radius:10px;  /*兼容chrome和Safari*/
-moz-border-radius:10px;     /*兼容Firefox*/
-ms-border-radius:10px;      /*兼容IE*/
-o-border-radius:10px;       /*兼容opera*/

在接下來的CSS3教程學習中,對於CSS3屬性的書寫,我們都要像上述代碼那樣做兼容處理。不管我們對浏覽器內核前綴有多麼的討厭,我們都不得不每天面對它,否則有些東西不能正常工作。

在CSS3課程的學習中,建議大家使用最新版本的chrome、Firefox、Safari、opera等來學習,此課程不支持IE9以下版本的IE浏覽器。此外,建議大家還是安裝一下chrome、Firefox這些浏覽器吧,在前端的開發中,往往都需要做兼容處理,我們需要檢查頁面在各個浏覽器的預覽效果是否出現問題。要是只裝個360或搜狗浏覽器的話,還搞毛線前端開發呢?

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved