css3中@supports指的是什么

這篇文章將為大家詳細講解有關css3中@supports指的是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比延慶網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式延慶網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋延慶地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

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

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

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

1、很多實驗性的功能未成為標準就被大量的使用；

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

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

CSS 特性檢測就是針對不同瀏覽器終端，通過條件判斷當前瀏覽器對某個特性是否支持。運用 CSS 特性檢測，我們可以在支持當前特性的瀏覽器環(huán)境下使用新的技術，而不支持的則做出某些回退機制?！鞠嚓P視頻教程推薦：CSS3教程】

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

css3 @supports的使用

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

基本語法：

//如果通過了條件
@supports(運行條件) {
    /* 應用規(guī)則---想要實現(xiàn)的css語句*/
}
 //如果沒有通過條件
@supports not(運行的條件) {
    /* 應用規(guī)則---想要實現(xiàn)的css語句 */
}

例：

/ *僅當支持'display：flex'時才在'@supports'規(guī)則中應用規(guī)則。* / 
@ supports（display：flex）{    
    .el {         
       display：flex;        
       align-items：middle;        
       / * ...... * /
    }
}

實現(xiàn)多個條件的多個檢查

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

and和or運算符可以分開使用，也可以組合使用，例：

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

@supports (transform: rotate3d(1, 1, 0, 30deg) and 
          (transition: transform 2s) or 
          (animation: my-3d-animation 2s alternate forwards) {    
          /* ... */
 }

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

@supports   (transform: rotate3d(1, 1, 0, 30deg) and 
            ( (transition: transform 2s) or (animation: my-3d-animation 2s alternate forwards) ) {    
            /* ... */
}

注：

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

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

3、組合運算符時，必須使用括號清除優(yōu)先級。

瀏覽器支持

支持以下版本：

css3中@supports指的是什么

關于css3中@supports指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：css3中@supports指的是什么
文章源于：http://bm7419.com/article12/ijhpgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站建設、商城網(wǎng)站、響應式網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容