检测浏览器是否支持“@supports”？答案

【问题标题】：Detect if browser supports "@supports"?检测浏览器是否支持“@supports”？
【发布时间】：2018-05-01 20:49:16
【问题描述】：

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

【问题讨论】：

本身不是黑客，只需像往常一样使用级联。相关问题：stackoverflow.com/questions/21257329/…stackoverflow.com/questions/16584228/…
不是答案，但好消息是几乎所有浏览器都支持@supports。 caniuse.com/#feat=css-featurequeries。只有约 2% 的用户仍然有 IE 并且会遇到问题：w3schools.com/browsers/browsers_explorer.asp
非常有帮助，在我的情况下，它帮助我现在以旧方式构建/设计，然后在我准备好时使用单独的文件“现代化”我的 CSS。最后，它只是用于训练目的，直到我变得更舒服为止。一旦你把所有的功能都关闭了，纯粹的级联显然是要走的路。谢谢！

标签： javascript html css media-queries

【解决方案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

【讨论】：

 <link rel="stylesheet" href="legacy.css">  @supports ( color: rgb(255,255,255,0.5) ) { @import url("modern.css"); @media ... @supports ... ... } 在这种情况下，我测试看看现代颜色是否被 alpha（透明度）接受，然后安全地应用更现代的糖，对吗？ @BoltClock