使用唯一CSS检查“@supports”支持的最实用方法是什么？
继埃里克Bidelman的Google I / O演示文稿昨天发布了@supports关于@supports主题的@supports ，我想我会在Chrome Canary中开始使用它。 但是，它提出了一个明显的问题：
什么是检查浏览器是否支持@supports使用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的语法决定，您可以在规范中找到它。
只需测试一个您确定可以在所有用户代理中工作的属性/值对，无论是否实施了@supports 。 这种（排序）消除了您将遇到实现@supports但不包含该属性/值组合的用户代理的可能性，重点在于它支持@supports 。
你给出的display: block例子就足够了。 您可以使用级联来检查浏览器是否通过在支持它的浏览器中覆盖@supports规则中的声明来实现@supports也是可以接受的（作为唯一明显的方法）。
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 */
}
这可能不会起作用，你不能通过CSS检查是否支持@supports ，你的例子在这里完全没问题，但是这里没有选择直接的方法，例如你正在使用这个：
@supports (@supports) {
/* Styles */
}
现在，实际上并不适用，可能是Chrome Canary ，这是很好的@supports但是当它进行括号检查时，它会失败，为什么？ 它期望在括号内有一个CSS property: value对，而不是任何@规则，它实际上检查是否有任何属性是有效的，即使用@supports (@font-face)替换该@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;
}
}
演示 （注意：此功能仅适用于铬金丝雀）
说明：
@supports (-webkit-border-radius: 6px)将在Chrome Canary中检查是否支持名为-webkit-border-radius的属性，如果是，则继续操作，将第一个div的颜色更改为red并将其替换为cuz Chrome Canary确实支持-webkit属性，而第二个将会失败，因为Chrome不支持-moz前缀属性，它会绘制蓝色，因为我not这里使用
@supports not (-moz-border-radius: 6px)
---^---
希望常见问题
1）为什么这些样式都不适用于浏览器？
这是因为您的浏览器尚不支持@supports ，因此浏览器将忽略@supports规则，因此无法应用
来自W3C
'@supports'规则是一个条件组规则，其条件测试用户代理是否支持CSS属性：值对
链接地址: http://www.djcxy.com/p/29469.html上一篇: What is the most practical way to check for "@supports" support using only CSS?