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-keyword后跟开括号！）。属性/值对要求由@supports的语法决定，您可以在spec中找到。

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

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

Answer 2

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 */
}

Answer 3

这可能不会起作用，你无法通过CSS检查是否支持@supports，你的例子在这里完全没问题，但这里没有直接方法的选择，例如你正在使用这个：

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

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

当您使用@supports时，它会附带一个名为not的关键字来检查浏览器是否支持特定样式，如果是，则应用，否则应用其他... < / p>

实施例

@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（注意：目前仅适用于铬金丝雀）

说明：

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

@supports

希望常见问题解答

1）为什么在浏览器中没有应用任何样式？

那是因为您的浏览器还不支持@supports，因此浏览器只会忽略{{1}}规则

来自W3C

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

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

3 个答案: