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

问题描述

昨天，关于Eric Bidelman的Google I / O ，其中涉及 @supports ，我想我会开始使用它在Chrome Canary。但是，它提出了一个明显的问题：

什么是最好的方法来检查浏览器是否支持 @supports 只有CSS？

---

我目前正在玩弄它，只需检查 display：block 。这个方法很明显，但我不知道这是否是最实用的方法：

  body {background：#fff ; font-family：Arial; } 
 body：after {content：'Ek！您的浏览器不支持@supports'; } 
 
 @supports（display：block）{
 body {background：＃5ae; } 
 body：after {color：#fff;}内容：您的浏览器支持@supports，yay！ } 
} 
  

这是一个演示此操作。

这些尝试不会 Chrome Canary）：

  @supports（@supports）{...} 
 @supports {...} 
 @supports {...} 
  

解决方案

@supports 目前只测试属性/值组合，没有别的。你的其他选项不工作，因为它们都不是有效的（包括最后一个只有关键字后面的大括号！）。属性/值对要求由 @supports 的语法规定，您可以在。

只需测试一个属性/值对，无论是否实现 @supports ，都可以在所有用户代理中工作。这种（排序）消除了您将遇到实现 @supports 但不是属性/值组合的用户代理的可能性，重点是其对<$ c

display：block 足够。您使用级联检查浏览器是否通过覆盖 @supports 中的声明实现 @supports code> 支持的浏览器规则也是可以接受的（这是唯一明显的方法）。

Following Eric Bidelman's Google I/O presentation yesterday, which touched on the subject of @supports, I figured I'd start playing with it in Chrome Canary. However, it's raised the obvious question:

What is the best way to check whether a browser supports @supports using only CSS?

---

I'm currently toying with it by simply checking whether display: block is supported. This method works, obviously, but I'm not sure if this is the most practical approach:

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!'; }
}

Here is a JSFiddle demo of this in action.

These attempts do not work (in Chrome Canary, at least):

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

解决方案

@supports currently only tests property/value combinations, and nothing else. Your other options don't work because none of them are valid (including the last one with just the at-keyword followed by the opening brace!). The property/value pair requirement is dictated by the grammar for @supports, which you can find in the spec.

Simply test for a property/value pair that you know is guaranteed to work across all user agents whether or not @supports is implemented. This (sort of) eliminates the possibility that you'll run into a user agent that implements @supports but not that property/value combination, focusing on its support for @supports instead.

Your given example of display: block will suffice. Your use of the cascade to check if a browser does not implement @supports by overriding declarations within a @supports rule for browsers that do support it is also acceptable (being the only obvious way to do it anyway).

这篇关于什么是检查“@支持”的最实用的方法支持只使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！