最实用的检查方法是什么@支持；只支持使用CSS？

继埃里克·拜德曼（Eric Bidelman）昨天的谷歌I/O之后，我想我应该开始在Chrome Canary中使用它了。谷歌I/O涉及到

@支持的主题。然而，它提出了一个显而易见的问题：

检查浏览器是否支持仅使用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!'; }
}

这是一个实际的演示

这些尝试不起作用（至少在Chrome Canary中是这样）：

David walsh的博客有一个关于@supports的不错的教程

事实上，您可以在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 */
}

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

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

现在这实际上不起作用了，可能是因为，这很好
@支持
，但是当它继续检查括号之间时，它失败了，为什么？它需要一个CSS
property:value
对放在括号内，而不是任何
@
规则，它实际上检查任何属性是否有效，即使用
@supports（@font-face）
替换它也不起作用，接下来，我将用一个演示来解释

当您使用
@supports
时，它会附带一个名为
not
的关键字，用于检查浏览器是否支持特定样式，如果支持，则选择apply，否则选择apply other

范例

@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;
    }
}

（注意：目前仅适用于铬金丝雀）

说明：

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

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

希望常见问题

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

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


从

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

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

只需测试一个属性/值对，无论是否实现了
@supports
，该属性/值对都保证在所有用户代理中工作。这（某种程度上）消除了这样一种可能性，即您将遇到一个实现
@supports
但不实现该属性/值组合的用户代理，而将重点放在它对
@supports
的支持上

您给出的
display:block
示例就足够了。您也可以使用级联来检查浏览器是否通过覆盖
@supports
规则中的声明来实现
@supports
支持，这是唯一明显的方法.
他的问题是如何检查
@supports
是否仅使用CSS支持，而不是如何检查支持哪个属性：）是的，解决了lately@NobalMohan可以检查伪代码吗？像@support
@supports.element（：focus in）{
？是否有一种情况是
display:block
不包含在CSS实现中？如果是这样，测试一些永远不会成为CSS一部分的内容是否更符合逻辑；
@不支持（{:}
？@JamesDonnelly
@不支持（{:}）{}=@不支持（WhateVerbutthisDoesNTMAKEANYSENSEProperty:5px）{}
所以，如果属性-值对无效或属性根本无效，浏览器只会假定它尚未生效supported@James唐纳利：实际上，没有-我宁愿担心浏览器不正确地实现
@支持
。但是，如果你愿意，你也可以这样做。@Alien先生：是的。当然，你必须做出选择请确保它没有违反
@支持
规则。伙计，我需要用一个K来赢得一个3位数的代表，才能让我的答案被选为正确答案；）演示并没有解释为什么
@支持（@font-face）
不起作用……它只是解释了如何使用
@supports
，正如OP所提到的，这与问题无关。@BoltClock
@支持，但当它继续检查括号之间的属性时，它失败了，为什么？它希望括号内有一个CSS属性：值对，而不是任何@rule，它实际上检查是否有任何属性y是否有效，即使您将其替换为@supports（@font-face）也不起作用
当@supports仅与属性值对一起工作时，我如何向他提供演示？您正在演示
@supports
和
@supports not
-这与
@supports（@font-face）有什么关系
？虽然我猜FAQ部分回答了这个问题，但你的答案似乎很混乱。@BoltClock我向他演示了它如何只处理属性而不处理
@
规则，接下来我向他解释了如何使用
@支持
具有有效参数的
属性：值
组合，ce
@supports not (-moz-border-radius: 6px)
        ---^---