本篇內容介紹了“css3的@supports有什么作用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網絡空間、營銷軟件、網站建設、饒河網站維護、網站推廣。

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

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

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

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

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

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

CSS特性檢測就是針對不同瀏覽器終端，通過條件判斷當前瀏覽器對某個特性是否支持。運用CSS特性檢測，我們可以在支持當前特性的瀏覽器環境下使用新的技術，而不支持的則做出某些回退機制。

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

css3@supports的使用

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

基本語法：

//如果通過了條件

@supports(運行條件){

/*應用規則---想要實現的css語句*/

}

//如果沒有通過條件

@supportsnot(運行的條件){

/*應用規則---想要實現的css語句*/

}

例：

/*僅當支持'display：flex'時才在'@supports'規則中應用規則。*/

@supports（display：flex）{

.el{

display：flex;

align-items：middle;

/*......*/

}

}

實現多個條件的多個檢查

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

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

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

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

(transition:transform2s)or

(animation:my-3d-animation2salternateforwards){

/*...*/

}

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

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

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

/*...*/

}

注：

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

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

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

“css3的@supports有什么作用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

名稱欄目：css3的@supports有什么作用
瀏覽路徑：http://newbst.com/article28/jhchjp.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、企業建站、微信公眾號、響應式網站、網站設計、App設計

廣告

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