css3新特性--Conditional Rules Module该规范定义了一些CSS条件组规则,关联条件和一群其他C

该规范定义了一些CSS条件组规则,关联条件和一群其他CSS规则。

这些不同的规则允许测试不同类型的条件, 但他们的行为必须相同。条件组规则的 body 必须用{ } 包裹，允许嵌套，不允许出现 ruleset (e.g., ‘@charset’, ‘@import’, or ‘@namespace’)。如果出现ruleset，ruleset会被忽略。

@media

/* 
	当彩屏并且最小宽度为35em 或 打印并且最小宽度为40em 时，
	 #section_navigation 样式生效
*/
@media screen and (min-width: 35em),
       print and (min-width: 40em) {
  #section_navigation { float: left; width: 10em; }
}

@media 的条件并定义在Media Queries，这里就不具体说了。

顺便说一下，Media Queries 中有提到, @media可以写在 link ,或者 @import 上

<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(color.css) screen and (color);

@supports

@supports 用于功能查询，可以当功能支持或不支持时生效

/* 支持flex  */
@supports ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

/* 不支持flex  */
@supports not ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

语法有以下需要注意的地方

条件必须使用( )包裹起来

/* 有效  */
@supports ( display: flex ) {}

/* 无效  */
@supports   display: flex   {}

条件连接符有 or 和 and

@supports ( display: flex and flex: 1 ) {
	// ...
}

@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 ) {
	// ...
}

or 和 and 不能同级使用,同时使用请用( )分割

/* 无效  */
@supports ((transition-property: color) or
           (animation-name: foo) and
           (transform: rotate(10deg)) {
  // ...
}

/* 有效  */
@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...
}

/* 有效  */
@supports ((transition-property: color) or
           ((animation-name: foo) and
          (transform: rotate(10deg))) {
  // ...
}

允许冗余的()

/* 两种写法作用相同 */
@supports ((display: flexbox)) {
  // ...
}

@supports (display: flexbox) {
  // ...
}

使用 !important 不会影响判断

/* 两种写法作用相同 */
@supports (display: flexbox) {
  // ...
}

@supports (display: flexbox !important) {
  // ...
}

API

CSSRule

扩展了CSSRule的接口, SUPPORTS_RULE = 12。

document.styleSheets 是 CSSStyleSheet 的集合。

CSSGroupingRule

 interface CSSGroupingRule : CSSRule {
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
 }

CSSConditionRule

interface CSSConditionRule : CSSGroupingRule {
    attribute DOMString conditionText; //条件文本
}

设置conditionText属性时，必须遵循这些步骤：

去掉给定值的空格
如果给出的值针对特定规则，匹配上适当条件结果的语法，用给出的值替换关联的CSS条件
否则，啥也不做

CSSMediaRule

interface CSSMediaRule : CSSConditionRule {
     readonly attribute MediaList media;
 }

CSSSupportsRule

interface CSSSupportsRule : CSSConditionRule {
 }

例子

如果有这么一个html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <style>
    @media screen and (min-width: 500px) {
      body {
        color: red;
      }

      body {
        color: blue;
      }
    }
  </style>
</head>

<body>
  body
</body>

</html>

// 获取CSSMediaRule
var mediaRule = document.styleSheets[0].cssRules[0]
// 删除蓝色
mediaRule.deleteRule(1)
// 插入黄色，第二个参数css是位置
mediaRule.insertRule('body{ color: yellow }',1)

CSS.supports

根据浏览器是否支持 css 返回 true 或 false

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


// 可以是2个参数，css 的 key 和 value
CSS.supports('display', 'flex')

//可以是一个参数， @support 的条件字符串，具体参考上面的@support
CSS.supports(`
((transition-property: color) or
 (animation-name: foo)) and
(transform: rotate(10deg))
`)

所有的css3特性都会更新在这里总集篇