CSS怎么檢測瀏覽器的兼容情況

這篇文章主要講解了“CSS怎么檢測瀏覽器的兼容情況”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS怎么檢測瀏覽器的兼容情況”吧！

CSS @supports標記在CSS代碼里跟@media查詢語句的語法相似：

CSS Code復制內容到剪貼板

1. @supports(prop:value) {   

2.  /* 各種樣式 */  

3. }  

CSS @supports允許程序員用多種不同的方法來探測當前瀏覽器是否支持某項CSS樣式特征。

基本屬性檢測
你可以執行對基本屬性和屬性值的檢測：

CSS Code復制內容到剪貼板

1. @supports (display: flex) {   

2.  div { display: flex; }   

3. }  

這是@supports標記最基本的用法。

not關鍵字
@supports標記可以和‘not’關鍵字組合，用來應對不支持的情況：

CSS Code復制內容到剪貼板

1. @supports not (display: flex) {   

2.  div { float: left; } /* 替換樣式 */  

3. }  

多檢測及條件檢測

CSS Code復制內容到剪貼板

1. /* or */  

2. @supports (display: -webkit-flex) or   

3.           (display: -moz-flex) or   

4.           (display: flex) {   

5.   

6.     /* use styles here */  

7. }   

8.   

9. /* and */  

10. @supports (display: flex) and (-webkit-appearance: caret) {   

11.   

12.  /* something crazy here */  

13. }   

14.   

15. /* and and or */  

16. @supports ((display: -webkit-flex) or   

17.           (display: -moz-flex) or   

18.           (display: flex)) and (-webkit-appearance: caret) {   

19.   

20.     /* use styles here */  

21. }  

Javascript CSS.supports()
在Javascript中通過使用window.CSS.supports方法來對CSS @supports進行檢測，規范中提供了兩個方法，一個方法可以接收兩個參數boolValue = CSS.supports(propertyName, value);另一個可以接收一個字符串（A DOMString containing the condition to check），boolValue = CSS.supports(supportCondition);具體使用看下例：

JavaScript Code復制內容到剪貼板

1. //測試環境，Chrome:34.0.1847.131 m   

2. var res01 = CSS.supports("text-decoration-style", "blink");   

3. //Outputs: false   

4. console.log(res01);   

5.   

6. var res02 = CSS.supports("display", "flex");   

7. //Outputs: true   

8. console.log(res02);   

9.   

10. var res03 = CSS.supports("( transform-origin: 5% 5% )");   

11. //Outputs: false   

12. console.log(res03);   

13.   

14. var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   

15.                       "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   

16. //Outputs: false   

17. console.log(res04);  

@supports的使用場景

大多數情況，@supports是用來支持老式瀏覽器，并在有可能的情況下，利用現代瀏覽器的新特征來提高用戶體驗。@supports的一個最重要的使用場景是頁面布局。很多現代瀏覽器都提供了對flexbox網頁布局的支持，在這種還有很多瀏覽器不支持的情況下，你的代碼可以寫成這樣：

CSS Code復制內容到剪貼板

1. section {   

2.  float: left;   

3. }   

4.   

5. @supports (display: -webkit-flex) or   

6.           (display: -moz-flex) or   

7.           (display: flex) {   

8.   

9.     section {   

10.       display: -webkit-flex;   

11.       display: -moz-flex;   

12.      display: flex;   

13.      float: none;   

14.     }   

15. }  

感謝各位的閱讀，以上就是“CSS怎么檢測瀏覽器的兼容情況”的內容了，經過本文的學習后，相信大家對CSS怎么檢測瀏覽器的兼容情況這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！