CSS3的私有前綴有哪些

這篇文章主要介紹“CSS3的私有前綴有哪些”，在日常操作中，相信很多人在CSS3的私有前綴有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS3的私有前綴有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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

　　CSS3中的私有前綴

　　-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前綴如何使用

　　在使用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}

　　Autoprefixer使用一個(gè)數(shù)據(jù)庫(kù)根據(jù)當(dāng)前瀏覽器的普及度以及屬性支持提供給你前綴，輸出：

　　復(fù)制代碼

　　1a{

　　2display:-webkit-box;

　　3display:-webkit-flex;

　　4display:-ms-flexbox;

　　5display:flex

　　6}

到此，關(guān)于“CSS3的私有前綴有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！