通俗講css的瀏覽器前綴

為何對于有的css屬性要加上-webkit、-o等前綴

例如:

div
{
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
  border-image:url(border.png) 30 30 round;
}

解釋:這些前綴稱為瀏覽器引擎前綴(vendor prefix),這些前綴是為了實現瀏覽器兼容;很抽象是吧,舉個具體的栗子吧:

w3c說css中要加個font-color屬性,用于指定文本的邊框顏色,但是 ,這個font-color屬性目前只是個草案噢,能不能成為標準還不一定;</br>

瀏覽器A老實巴交的在渲染器中實現了該功能,而瀏覽器B比較狡猾,不實現font-color屬性,而實現了B-font-color屬性,公司X通過了解后寫了以下代碼:

#mytext{
  B-font-color:red; /*在B瀏覽器中文字顯示紅色邊框*/
  font-color:red; /*在A瀏覽器中文字顯示紅色邊框*/  
}

寫好以后,前端開發(fā)和瀏覽器廠商都很happy啊,不錯,達到了預期目的;就這樣平安無事的過了n年;</br>

n年后,w3c認為,在草案中將font-color設為文字的邊框不合理,所以最終的標準將font-color設為了文字的顏色;既然成為標準了,那么,以后的前端程序員和瀏覽器都必須按標準來;</br>

瀏覽器B不緊不慢的在其渲染引擎中添加了font-color屬性,而A就有點尷尬了,已經實現了了font-color功能,怎么辦,只能改唄,A就對外宣布,以后font-color屬性不再代表文字邊框顏色,改為字體顏色;</br>

這一改,公司X不干了,說好的邊框紅色,怎么在A上運行時給我去掉了,嚴重影響了我界面的美觀,譴責!從此,A瀏覽器漸漸衰弱下去;</br>

你也可能說,不對啊,由于w3c新標準的發(fā)布,B的字體顏色也變了啊,為啥不譴責它呢,這是因為B沒有去掉X公司原來有的樣式,只是按照標準增加了效果,而這由于新標準帶來的影響,你X公司要譴責就譴責w3c去,誰叫他不一開始就出臺標準,而弄個草案呢,B竊喜,反正沒我責任;</br>

由此可見,瀏覽器前綴是瀏覽器廠商為了盡快實現草案中的內容,又為了以后的草案標準化而耍的“小聰明”;

為何要把不帶前綴的屬性寫在最后

這是因為css屬性具有后面屬性覆蓋前面屬性的特性,例如:

  #mytext{
    background:red;
    background:green; /*mytext的綠色背景將覆蓋紅色背景*/
  }

用戶在草案期編寫的代碼,在w3c確定標準后,就能以最后的不帶前綴的屬性覆蓋所有前面沖突的屬性,實現自動的向標準看齊的作用;

常用的前綴列表

前綴名稱 瀏覽器內核 瀏覽器
-webkit Webkit Chrome、Safari
-moz Gecko Firefox
-o Presto Opera
-ms Trident IE

想了解瀏覽器內核的發(fā)展,請看--全面了解瀏覽器內核發(fā)展史

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,328評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 簡介網絡瀏覽器很可能是使用最廣的軟件。在這篇入門文章中,我將會介紹它們的幕后工作原理。我們會了解到,從您在地址欄輸...
    wengjq閱讀 2,060評論 2 15
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,038評論 1 4