css3的@supports有什么作用

本篇內(nèi)容介紹了“css3的@supports有什么作用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　css3@supports是什么？有什么用？

　　@supports是CSS3新引入的規(guī)則之一，主要用于檢測(cè)當(dāng)前瀏覽器是否支持某個(gè)CSS屬性并加載具體樣式，即css的特性檢測(cè)。

　　我們要知道，在前端技術(shù)日新月異的今天，各種新技術(shù)新屬性層出不窮；而CSS層面亦不例外，css的一些新屬性能極大提升用戶體驗(yàn)以及減少開發(fā)者的工作量，并且當(dāng)下的前端氛圍是如此的：

　　1、很多實(shí)驗(yàn)性的功能未成為標(biāo)準(zhǔn)就被大量的使用；

　　2、需要兼容多種終端，多種瀏覽器，而各種瀏覽器對(duì)某一新功能的實(shí)現(xiàn)效果天差地別；

　　在這種背景下，又想使用新的技術(shù)給用戶提供更好的體驗(yàn)，又想做好回退機(jī)制保證低版本終端用戶的基本體驗(yàn)，CSS特性檢測(cè)就應(yīng)運(yùn)而生了。

　　CSS特性檢測(cè)就是針對(duì)不同瀏覽器終端，通過條件判斷當(dāng)前瀏覽器對(duì)某個(gè)特性是否支持。運(yùn)用CSS特性檢測(cè)，我們可以在支持當(dāng)前特性的瀏覽器環(huán)境下使用新的技術(shù)，而不支持的則做出某些回退機(jī)制。

　　下面我們就來看看css3@supports是如何使用的，介紹@supports進(jìn)行css特性檢測(cè)的方法。

　　css3@supports的使用

　　CSS@supports可以通過CSS語法來實(shí)現(xiàn)特性檢測(cè)，并在內(nèi)部CSS區(qū)塊中寫入條件判斷語句：如果特性檢測(cè)通過則希望實(shí)現(xiàn)的CSS語句，如果特性檢測(cè)不通過則希望實(shí)現(xiàn)的CSS語句。

　　基本語法：

　　//如果通過了條件

　　@supports(運(yùn)行條件){

　　/*應(yīng)用規(guī)則---想要實(shí)現(xiàn)的css語句*/

　　}

　　//如果沒有通過條件

　　@supportsnot(運(yùn)行的條件){

　　/*應(yīng)用規(guī)則---想要實(shí)現(xiàn)的css語句*/

　　}

　　例：

　　/*僅當(dāng)支持'display：flex'時(shí)才在'@supports'規(guī)則中應(yīng)用規(guī)則。*/

　　@supports（display：flex）{

　　.el{

　　display：flex;

　　align-items：middle;

　　/*......*/

　　}

　　}

　　實(shí)現(xiàn)多個(gè)條件的多個(gè)檢查

　　在@supports中，我們可以使用and和or運(yùn)算符創(chuàng)建復(fù)雜的測(cè)試，檢查規(guī)則中的多個(gè)功能是否支持。

　　and和or運(yùn)算符可以分開使用，也可以組合使用，例：

　　為避免由優(yōu)先規(guī)則引起的混淆，現(xiàn)在允許組合and，使用or，但不使用括號(hào)圖層。這意味著以下聲明無效：

　　@supports(transform:rotate3d(1,1,0,30deg)and

　　(transition:transform2s)or

　　(animation:my-3d-animation2salternateforwards){

　　/*...*/

　　}

　　我們需要使用括號(hào)組合條件，就像使用其他編程語言一樣，這樣可以使得優(yōu)先級(jí)清晰。所以，上面的例子對(duì)你這樣做是有效的：

　　@supports(transform:rotate3d(1,1,0,30deg)and

　　((transition:transform2s)or(animation:my-3d-animation2salternateforwards)){

　　/*...*/

　　}

　　注：

　　1、在not、and、or兩側(cè)都需要使用空格分開

　　2、正在測(cè)試的聲明（運(yùn)行條件）必須始終出現(xiàn)在括號(hào)內(nèi)，而它是表達(dá)式中唯一的內(nèi)容；否則就是無效的聲明。

　　3、組合運(yùn)算符時(shí)，必須使用括號(hào)清除優(yōu)先級(jí)。

“css3的@supports有什么作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！