javascript - 检测浏览器是否支持 "@supports"?

Question

我意识到这可能是一个愚蠢的问题，因为无论如何我都会在一段时间后回到网络开发，所以请不要害羞地启发我!在我看来，css hack 的艺术(就像过去嗅探旧的 IE 浏览器一样)可以用来填补新的 @supports 查询和不支持 these features 的旧浏览器之间的空白。 .有可能从大量 javascript 中拯救您自己和您的网站吗？甚至帮助在小元素中完全放弃 javascript。有人知道这样的元素吗？也有可能我没能用正确的关键字搜索...

Answer 1

是的，您可以使用以下命令执行此操作:

以下所有示例均有效:

@supports not (not (transform-origin: 2px)) - 对于不支持的测试浏览器

或

@supports (display: grid) - 用于支持测试浏览器

或

@supports (display: grid) and (not (display: inline-grid)). - 用于测试两者

有关详细信息，请参阅 MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports