6

继昨天 Eric Bidelman 的 Google 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 Canary 中）：

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

3 回答 3

5

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

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

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

于 2013-05-16T10:37:00.797 回答
2

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

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

现在这实际上不起作用，可能是Chrome Canary，这很好@supports，但是当它继续检查括号之间时，它失败了，为什么？它需要括号内的 CSSproperty: value对而不是任何@规则，它实际上检查任何属性是否有效，即使您将其替换为@supports (@font-face)将不起作用，再往下，我将通过演示向您解释

当你使用@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;
    }
}

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

解释 ：

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

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

希望常见问题解答

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

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

来自W3C

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

于 2013-05-16T10:24:27.387 回答
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 */
}
于 2013-05-16T10:21:56.173 回答