仅使用CSS检查"@supports"支持的最实用方法是什么？

Question

继昨天Eric Bidelman的谷歌I/O 演示之后@supports,我想到我会开始在Chrome Canary中玩它.然而,它提出了一个显而易见的问题:

检查浏览器是否支持@supports仅使用CSS 的最佳方法是什么？

---

我现在只是通过检查是否display: block支持它来玩弄它.显然,这种方法很有效,但我不确定这是否是最实用的方法:

body { background:#fff; font-family:Arial; }
body:after { content:'Ek! Your browser does not support @supports'; }

@supports (display:block) {
    body { background:#5ae; }
    body:after { color:#fff; content:'Your browser supports @supports, yay!'; }
}

这是一个JSFiddle演示中的这个实际操作.

这些尝试都无法正常工作(在Chrome金丝雀,至少):

@supports (@supports) { ... }
@supports () { ... }
@supports { ... }

Answer 1

@supports目前只测试属性/值组合,没有别的.您的其他选项不起作用,因为它们都不是有效的(包括最后一个只有at-keyword后跟开括号!).属性/值对要求由语法决定@supports,您可以在规范中找到.

只需测试您知道的属性/值对,无论是否@supports实现,都可以保证所有用户代理都能正常工作.这种(某种程度上)消除了您将遇到实现@supports但不是该属性/值组合的用户代理的可能性,而是专注于其支持@supports.

你给出的例子display: block就足够了.您使用级联的检查,如果浏览器不实现@supports由内覆盖声明@supports为浏览器规则不支持它也是可以接受的(即做也无妨唯一明显的方式).