Question

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

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

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

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

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

Answer 1

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

另外，请在规范中引用here：

CSS渲染器必须将任何at-rules，属性，属性值，关键字以及其他没有可用支持级别的语法结构视为无效（并在适当时忽略）。

忽略内部任何内容是为了遵守规范。

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但实际上是support the transform property（例如IE9-11）。

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

使用媒体查询检测CSS功能

2 个答案: