详解CSS中@suppor、ts的用法

发布时间:2017-08-06 14:05 来源:互联网 当前栏目:网页设计教程

  基于浏览器的特性检测大家应该已经很熟悉了,特别是modernizr.js推出来之后。其实w3c也出了规范,可以基于css来做一些特性检测,也就是@supports,这个特性已经有两年多了,之前浏览器支持度不够,现在webkit nightly也开始支持了,也就是说safari 9会支持到,这样的话,Blink+webKit+gecko都支持了,只剩下IE浏览器不支持了,嗯,这样更方便对IE差异化处理了。

  但是@supports并不能完全替代

探索发现[www.9-39.com/html/explore/]
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来区分或者做浏览器差异化了。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、