萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 詳解CSS中@supports的用法

詳解CSS中@supports的用法

  基於浏覽器的特性檢測大家應該已經很熟悉了,特別是modernizr.js推出來之後。其實w3c也出了規范,可以基於css來做一些特性檢測,也就是@supports,這個特性已經有兩年多了,之前浏覽器支持度不夠,現在webkit nightly也開始支持了,也就是說safari 9會支持到,這樣的話,Blink+webKit+gecko都支持了,只剩下IE浏覽器不支持了,嗯,這樣更方便對IE差異化處理了。

  但是@supports並不能完全替代JS的特性檢測方法,它只支持對CSS屬性的檢測,其它HTML5 api以及webP等技術的檢測還是需要JS來完成。

  用法:

  @supports就像media query一樣簡單:

  CSS Code復制內容到剪貼板

  @supports(prop:value) { /* more styles */ }

  @supports也允許你用各種復雜的組合來進行特性檢測。

  基本用法:

  CSS Code復制內容到剪貼板

  @supports (display: flex) { div { display: flex; } }

  你可以用這種方法來檢測各種基本的CSS屬性。

  not關鍵詞

  就像這樣:

  CSS Code復制內容到剪貼板

  @supports not (display: flex) { div { float: left; } /* alternative styles */ }

  個人感覺有些雞肋了,支持@supports的浏覽器會不支持各種CSS屬性麼?不過萬事沒有絕對,這種情況以後還是可能會有。嗯,私有前綴的話可以試試。

  多條件檢測

  CSS Code復制內容到剪貼板

  @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }

  /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }

  你也可以將or和and語句放在一起混用。

  CSS Code復制內容到剪貼板

  @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }

  或者更復雜的:

  CSS Code復制內容到剪貼板

  @supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ … /* specific CSS applied to simulate text-align-last:justify */ }

  JS方法

  同時也可以用javascript來做類似的檢測,方法也很簡單:

  CSS Code復制內容到剪貼板

  boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);

  兩種方法都可以,會返回一個bool值。比如:

  CSS Code復制內容到剪貼板

  result = CSS.supports("text-decoration-style", "blink");

  result = CSS.supports("display", "flex");

  result = CSS.supports("( transform-origin: 5% 5% )");

  result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );

  用途

  最大的用途是做css特性判斷的時候,不用再在js(或者傳統的js方法)了,用過modernizr.js的同學可能會印象很深刻,modernizr會在html標簽上加上各種各樣的class來區分,其它js方法也是類似的實現思路。現在可以直接用@supports來區分或者做浏覽器差異化了。

  浏覽器支持

  chrome 28+

  opera 12.1+

  firefox22+

  safari 9+

copyright © 萬盛學電腦網 all rights reserved