css - 仅使用CSS检查 “@supports”支持的最实用方法是什么？

在昨天Eric Bidelman的Google I/O presentation谈到了@supports的话题之后，我想我将开始在Chrome Canary中使用它。但是，它提出了一个显而易见的问题:

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

我目前正在通过简单地检查是否支持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 Canary中):

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

最佳答案

@supports当前仅测试属性/值组合，仅此而已。您的其他选项无效，因为它们都不是有效的(包括最后一个仅带有at关键字，后跟大括号的选项!)。属性/值对的要求取决于@supports的语法，您可以在spec中找到该语法。

只需测试一个已知的属性/值对，即可确保无论是否实现@supports，该属性/值对都能在所有用户代理中正常工作。这种(某种)消除了您会遇到实现@supports而不是实现属性/值组合的用户代理的可能性，而将注意力集中在对@supports的支持上。

您所给的display: block示例就足够了。您也可以使用级联来检查浏览器是否通过对支持它的浏览器覆盖@supports规则中的声明来实现@supports，这也是可以接受的(无论如何，这是唯一的明显方法)。

关于css - 仅使用CSS检查 “@supports”支持的最实用方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16584228/