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

Question

在昨天 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 { ... }

Answer 1

@supports 目前只测试属性/值组合，没有别的。您的其他选项不起作用，因为它们都无效（包括最后一个只有 at 关键字后跟左大括号的选项！）。属性/值对要求由 @supports 的语法规定，您可以在 spec 中找到该语法。

简单地测试一个你知道的属性/值对，无论@supports 是否实现，它都能保证在所有用户代理中工作。这（在某种程度上）消除了您遇到实现@supports 但不是该属性/值组合的用户代理的可能性，而是专注于它对@supports 的支持。

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

Answer 2

这可能行不通，您无法检查 @supports 是否仅由 CSS 支持，您的示例在这里完全没问题，但是这里没有直接方法的选项，例如您正在使用这个：

@supports (@supports) {
   /* Styles */
}

现在这实际上不起作用，可能适用于Chrome Canary，这很好@supports 但是当它继续检查括号之间的内容时，它失败了，为什么？它期望括号内有一个 CSS property: value 对，而不是任何 @ 规则，它实际上检查任何属性是否有效，即使你用 @supports (@font-face) 替换它也不起作用，再往下，我会用demo给你讲解

当你使用@supports时，它带有一个名为not的关键字，用于检查浏览器是否支持特定样式，如果支持，则应用，否则应用其他...

例子

@supports (-webkit-border-radius: 6px) {
    div:nth-of-type(1) {
        color: red;
    }
}

@supports not (-moz-border-radius: 6px) {
    div:nth-of-type(2) {
        color: blue;
    }
}

Demo（注意：目前仅适用于 chrome canary）

解释：

@supports (-webkit-border-radius: 6px) 将在 Chrome Canary 中检查是否支持名为 -webkit-border-radius 的属性，如果支持则继续，将第一个 div 的颜色更改为 red，它确实支持，因为 Chrome Canary 确实支持 @ 987654337@ 属性，而第二个将失败，因为 Chrome 不支持 -moz 前缀属性，它会涂成蓝色，因为我在这里使用not

@supports not (-moz-border-radius: 6px)
        ---^---

希望常见问题解答

1) 为什么浏览器中没有应用样式？

那是因为您的浏览器还不支持@supports，因此不会应用任何浏览器，因为浏览器只会忽略@supports 规则

---

来自W3C

“@supports”规则是一个条件组规则，其条件测试 用户代理是否支持 CSS 属性：值对

Answer 3

David walsh 博客有一篇关于@supports Link 的精彩教程。

确实，您的 JsFiddle 在 Chrome Canary 中可以完美运行。

@supports 的有效语法是，

@supports(prop:value) {
    /* more styles */
}

/* Negation */
@supports not(prop:value) {
    /* more styles */
}

/* `or` keyword*/
@supports(prop:value) or
         (prop:value){
    /* more styles */
}

/* `and` keyword*/
@supports(prop:value) and
         (prop:value){
    /* more styles */
}

/* `or`, `and` keywords*/
@supports(prop:value) or
         (prop:value) and 
          (prop:value) {
    /* more styles */
}