為何對于有的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ā)展史。