首頁 >web前端 >css教學 >css屬性前綴有哪些

css屬性前綴有哪些

青灯夜游
青灯夜游原創
2020-12-16 15:22:264308瀏覽

css屬性前綴有:1、“-moz-”,代表firefox瀏覽器的私有屬性;2、“-ms-”,代表ie瀏覽器的私有屬性;3、“-webkit-” ,代表safari、chrome瀏覽器的私有屬性;4、“-o-”,代表Opera瀏覽器的私有屬性。

css屬性前綴有哪些

(推薦教學:CSS影片教學

現在主要流行的瀏覽器核心主要有:

  • Trident核心:主要代表為IE瀏覽器

  • Gecko核心:主要代表為Firefox

  • Presto核心:主要代表為Opera

  • Webkit核心:產要代表為Chrome和Safari

而這些不同核心的瀏覽器,CSS3屬性(部分需要添加前綴的屬性)對應需要添加不同的前綴,也將其稱為瀏覽器的私有前綴,添加上私有前綴之後的CSS3屬性可以說是對應瀏覽器的私有屬性:

  • Trident內核:前綴為-ms-

  • Gecko內核:前綴為-moz-

  • Presto內核:前綴為-o-

  • Webkit核心:前綴為-webkit-

為什麼要有私有前綴呢?

因為制定HTML和CSS標準的組織W3C動作是很慢的。通常,有w3c組織成員提出一個新屬性,比如說圓角border-radius,大家都覺得好,但是w3c不會為這個屬性制定標準,而是要走很複雜的程序,經過很多審查。而瀏覽器商不願意等那麼久,他們覺得一個屬性已經夠成熟了,就會在瀏覽器中加入支援。

但是避免日後w3c公佈標準時有所變更,就會加入一個私有前綴,例如-webkit-border-radius,透過這種方式提前支援新屬性,等到日後w3c公佈了標準,border- radius的標準寫法確立之後,再讓新版的瀏覽器支援border-radius這種寫法。

來看一個簡單的範例,早期寫一個圓角border-radius,需要這樣寫:  

.box { 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-o-border-radius: 5px; 
border-radius: 5px; 
}

擴充資料:

所謂的瀏覽器核心也就是瀏覽器所採用的渲染引擎,渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解釋也有不同,因此同一網頁在不同的核心的瀏覽器裡的渲染(顯示)效果也可能不同,這也是網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果的原因。

更多程式相關知識,請造訪:程式設計教學! !

以上是css屬性前綴有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn