CSS 使用媒体查询进行特征检测

Question

我正在尝试检测浏览器是否支持 transform 属性。

为此，我包装了我想要在媒体查询中支持 transform 时应用的代码：

@media (transform: none) {
  // My code 
}

使用此代码，不会触发此部分。

transform的初始状态是none 所以我想知道为什么它不触发...

Answer 1

从the most recent media queries spec来看，这是不可能的。

此外，引用规范中的 here：

CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support.

忽略里面的任何内容都是为了遵守规范。

Answer 2

是的，这是真的。您无法使用媒体查询检测功能（仅作记录）。但您可以改用特征查询。

You can detect CSS features with "feature queries" (the @supports rule).

@supports (transform: none) {
  // browser supports transform property
}
@supports not (transform: none) {
  // browser doesn't support transform property
}

但是这个特定示例（针对 transform 属性的特征检测）有点棘手。如果我们看一下 caniuse，我们可以看到有一个 some browser that don't support the @supports rule but actually support the transform property（例如 IE9-11）。

那些浏览器会检测到 false 假的，这么说。这些浏览器将忽略功能查询，即使它们支持我们想要检测的实际功能。

CSS 使用媒体查询进行特征检测

CSS feature detection using media queries

css

feature-detection