CSS3中webkit私有前綴的含義是什么

這篇文章主要講解了“CSS3中webkit私有前綴的含義是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS3中webkit私有前綴的含義是什么”吧！

　　css3作為頁(yè)面樣式的表現(xiàn)語(yǔ)言，增加了很多新的屬性，但是部分css3屬性在一些瀏覽器上還處于試驗(yàn)階段，所以為了有效的顯示css3的樣式，對(duì)應(yīng)不同的瀏覽器內(nèi)核需要不同的前綴聲明，例如：

　　CSS3中webki私有前綴

　　-moz-：Firefox，GEcko引擎

　　-webkit-：Safari和Chrome，Webkit引擎

　　-o-：Opera（早期），Presto引擎，后改為Webkit引擎

　　-ms-：InternetExplorer，Trident引擎

　　使用這些前綴，才能保證css3的屬性在特定瀏覽器渲染引擎下生效。統(tǒng)一引擎一般不識(shí)別其它引擎的前綴，目前移動(dòng)端的瀏覽器相對(duì)比較統(tǒng)一，都是采用的webkit引擎，所以如果我們只需要兼容移動(dòng)端，只需要帶-webkit-前綴即可。

　　CSS3中webki私有前綴注意事項(xiàng)

　　在使用css3新屬性的時(shí)候，一般需要把帶有前綴的屬性放于前面，把不帶前綴的版本放到最后一行：

　　1-webkit-box-shadow:05px5pxrgba(0,0,0,.5);

　　2-moz-box-shadow:05px5pxrgba(0,0,0,.5);

　　3-o-box-shadow:05px5pxrgba(0,0,0,.5);

　　4box-shadow:05px5pxrgba(0,0,0,.5);

　　隨著瀏覽器的升級(jí)，目前大多數(shù)新版本瀏覽器都已經(jīng)支持不帶前綴的寫(xiě)法了，所以帶前綴只是為了兼容低版本，不帶前端的才是標(biāo)準(zhǔn)屬性。

　　那么如果想移除這些前綴，同時(shí)又滿足兼容的辦法也是有的。我們可以選擇Autoprefixer工具，一個(gè)以最好的方式處理瀏覽器前綴的后處理插件，無(wú)論你是用webpack、gulp、grunt還是fis，它都能完美配合。

　　使用Autoprefixer你可以完全忘記有CSS前綴這東西，盡管按照最新的W3C規(guī)范來(lái)正常書(shū)寫(xiě)你的CSS而不需要瀏覽器前綴。像這樣：

　　1a{

　　2display:flex;

　　3}

感謝各位的閱讀，以上就是“CSS3中webkit私有前綴的含義是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS3中webkit私有前綴的含義是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！