css - 浏览器如何处理无法识别的规则？

Question

CSS at-rules (例如，@import)自 CSS2 以来就已存在。新规则正在慢慢添加到 CSS3 中，例如 @supports具有不同级别的浏览器支持。主流浏览器如何处理它们无法识别的不受支持的规则？他们只是被忽略了吗？或者它们是否被视为语法错误？

例如，如果我要使用任何版本的 IE 都不支持的 @supports at 规则，IE 会因语法错误而失败，还是会被默默地忽略？

@supports (pointer-events: none) {
  ...
}

Answer 1

CSS 2.1 规范说

4.2 Rules for handling parsing errors

At-rules with unknown at-keywords.

User agents must ignore an invalid at-keyword together with everything following it, up to the end of the block that contains the invalid at-keyword, or up to and including the next semicolon (;), or up to and including the next block ({...}), whichever comes first.

For example, consider the following:

@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  h1 { color: red }
}
h1 { color: blue }

The @three-dee at-rule is not part of CSS 2.1. Therefore, the whole at-rule (up to, and including, the third right curly brace) is ignored. A CSS 2.1 user agent ignores it, effectively reducing the style sheet to:

h1 { color: blue }