漫谈@supports与CSS3条件规则

原创 2013年02月27日 21:33:12

         好吧,好久没有聊CSS3了,今天我们来讲讲CSS3的最新特性。

         在Chrome最新的动态里,添加了对CSS.supports()方法的支持,而许多关注浏览器发展的朋友也可能已经了解到Firefox和Opera开始支持@supports规则。CSS.supports()和@supports看起来非常相似,它们之间有什么关联,它们的前世今生究竟是怎么一回事呢?

         为了应付浏览器分裂的CSS3支持情况、支持渐进增强式设计,我们之前经常采用Modernizr这个库来判断浏览器对于HTML5、CSS3的支持情况,以便有针对性的设计网站界面和功能。

         也许很快我们不再需要Modernizr,因为浏览器本身将会告诉我们这些信息。

         @supports的源起

         @supports其实来源于W3C的这份工作草案:《CSS Conditional Rules Module Level 3》,即CSS的条件规则模块:允许我们在不同条件下来定义CSS样式。众所周知,CSS2.1支持@media条件规则,可以根据不同的媒介来加载不同的样式表,这个功能虽然出发点很好,但是使用起来并不方便,因为开发者需要写多个样式表来对应不同的媒介,非常麻烦。这份新的规范扩展了@media规则,允许在一个CSS样式文件里根据不同的媒介来定义样式。同时此规范增加了另外一个群众呼声很高的条件规则,即@supports。在浏览器CSS新特性越来越常见、更新越来越迅速,网站功能越来越前卫的今天,它允许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。这对我们来说非常重要。

         W3C网站上的官方代码示例如下:

@supports ( display: flexbox ) {
  body, #navigation, #content { display: flexbox; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

         上面的规则表示,当浏览器支持弹性盒子布局时,括号里的所有样式将会生效。而且@supports还支持简单的逻辑操作符,例如“not”,“and”、“or”等。例如,一个可能的规则如下(请注意我们是如何来为各浏览器提供兼容的):

@supports ( box-shadow: 2px 2px 2px black ) or
          ( -moz-box-shadow: 2px 2px 2px black ) or
          ( -webkit-box-shadow: 2px 2px 2px black ) or
          ( -o-box-shadow: 2px 2px 2px black ) {
  .outline {
    color: white;
    -moz-box-shadow: 2px 2px 2px black;
    -webkit-box-shadow: 2px 2px 2px black;
    -o-box-shadow: 2px 2px 2px black;
    box-shadow: 2px 2px 2px black; /* unprefixed last */
  }
}

         这篇规范里还提到了一个DOM API,即CSS.supports(),它是作为@supports的另一种形式出现的,供JavaScript调用来获得CSS属性的支持情况。顺便提一句,window.CSS这个命名空间将会包含多个CSS相关的常用方法(可以想想作为开发者来说,你需要哪些方法?)。

         它的定义如下,我们可以传入CSS属性的key和value或者一串字符来得到结果。

interface CSS {
  static boolean supports(DOMString property, DOMString value);
  static boolean supports(DOMString conditionText);
}

         浏览器支持情况

         规范总是要落地的,我们来看看浏览器的支持情况。

         Chrome已经在2月份最新的27版本里提供了对CSS.supports()的支持,详见这里

         Firefox在去年8月份支持了@supports,在12月份支持了CSS.supports()。对照W3C标准,在Firefox的示例里,CSS.supports()的调用方式有如下两种:

// 方法1
if (CSS.supports("display", "flex")) {
  // do something relying on flexbox
}
// 方法2
if (CSS.supports("(display: flex) and (display: grid)")) {
  // do something relying on flexbox and grid layout
}

         而Opera在去年11月就添加了对@supports的支持,顺带还提供了一个3D Transform的渐进增强式演示供大家体验。这里是使用@supports的方案,而这里是使用Modernizr的方案,感兴趣的朋友可以尝试对比一下。

Opera提供的@supports演示

         主流浏览器已经或者正在支持@supports,这对我们来说是好消息。

         使用@supports的好处

         我们为什么要用@supports,它比起Modernizr来说有什么优势呢?

         1、 速度

         @supports采用浏览器本地方法实现、速度更快、效率更高。

         2、效率

         避免引入JavaScript库,让开发更简单快捷;另外因为不需要加载JavaScript库,能减少HTTP请求量和服务器流量。

         3、 功能

         @supports支持多种逻辑操作符,可以很好的满足各种需求。

         方案的选择

         那我们该何时使用Modernizr呢?

         1、 浏览器不支持CSS.supports()和@supports时;

         2、 需要用它来判断HTML5的支持情况时(其实你也可以自己手写这部分代码)。

         @suppprts in Action

         实际上,Modernizr自身也在计划未来使用@supports替代自身的检测方法

         所以,现在你就应该立即使用@supports,正确的步骤是先检测是否支持CSS.supports()和@supports,如果不支持,再加载Modernizr,这样你的网站从始至终会有一个很好的兼容性。下面是实现代码:

if ( !(window.supportsCSS || (window.CSS && window.CSS.supports) )) load_modernizr();

         我预计@supports将会在网站中得到广泛的使用,@supports in Action now!

         原创文章,转载请注明来自蒋宇捷的博客(http://blog.csdn.net/hfahe)

         参考文章:

         《CSS Conditional Rules Module Level 3

         《why use supports instead of modernizr

         《Use Tomorrow's Web Standards Today WithCSS '@Supports'

@support与CSS3条件规则

@support与CSS3条件规则
  • xuyunfei_2012
  • xuyunfei_2012
  • 2017年02月08日 10:44
  • 218

一步步学习微软InfoPath2010和SP2010--第五章节--添加逻辑和规则到表单(5)--处理节和条件格式

当你想通过规则给容器内所有控件隐藏或应用格式化时,在节上使用条件格式是非常有用的。本例中,你将在采购表单(View Request)第二视图上工作,并添加条件格式规则到表单状态节。这允许你只显示表单当...
  • u012025054
  • u012025054
  • 2014年03月30日 12:45
  • 1151

CSS3条件判断——@supports

CSS3条件判断——@supports CSS3条件判断,听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话,你会发现CSS中的“@media”就是条件判断之一。是的,在CSS3...
  • bestlove12345
  • bestlove12345
  • 2016年07月07日 16:48
  • 1500

漫谈人工智能读后感

《漫谈人工智能读后感》系列1
  • u013473520
  • u013473520
  • 2015年12月22日 22:14
  • 1270

CSS3 @keyframes动画规则

W3CSchool标准CSS使用语法  *@keyframes 针对不同浏览器兼容 @keyframes mymove { from {top:0px;} to {top:200px;} } @-m...
  • boonyaxnn
  • boonyaxnn
  • 2017年03月12日 16:10
  • 1096

我的思考,我的科技漫谈——人工智能

近几天,串出一条狗(AlphaGo)和韩国围棋界“小李子”博弈。新闻消息也在各个方面探讨这个阿尔法狗。 阿尔法狗等人工智能在这次的热门事件被公众所关注,会有更多层面的考虑人工智能。但是我个人...
  • lavin00
  • lavin00
  • 2016年03月14日 11:33
  • 502

软件架构漫谈

前一篇文章简述了什么是软件。那么什么是软件架构呢?按照惯例,我们来看看是什么问题,是谁的问题。   要解决谁的问题?   如前所述,软件实际上就是把现实生活模拟到计算机中,并且软件是需要在计算机的...
  • u010098331
  • u010098331
  • 2016年06月05日 15:15
  • 795

《.NET 4.0面向对象编程漫谈》读者请进

《.NET 4.0面向对象编程漫谈》门户网页 汇总相关资源
  • bitfan
  • bitfan
  • 2010年11月06日 14:38
  • 21128

css3@media规则

可以在不改变html内容情况下,根据媒体设备不同,浏览器窗口尺寸不同使用不同的css样式。@media 设备类型 and(设备特性){ //css代码 }例如:(根据窗口大小不同...
  • zuiziyoudexiao
  • zuiziyoudexiao
  • 2017年06月24日 18:19
  • 387

<教育漫谈> 读书笔记 一

教育的意义人生幸福有一个简短而充分的描述: 健全的心智寓于健康的身体 人生的幸福和苦难,大部分是自己造成的。平常之人之所以有好有坏,之所以或有用或无用,十有八九都是教育造成的。人与人之间所以千差万...
  • yjn001
  • yjn001
  • 2016年05月13日 20:10
  • 341
收藏助手
不良信息举报
您举报文章:漫谈@supports与CSS3条件规则
举报原因:
原因补充:

(最多只允许输入30个字)