Question

在搜索浏览器中支持CSS支持的方法时，我遇到了两种不同的方法：CSS和JavaScript。我之前使用过JS来检查浏览器中的功能支持，但是没有使用CSS属性。据我所知，较新的浏览器增加了对CSS @supports的支持，但是那些不支持的浏览器呢？

CSS @supports的示例：

@supports (display: flex) {
    div { display: flex; }
}

因此，如果旧浏览器不支持CSS @supports，那么使用JS和CSS方法是否切实可行？关于我上面的例子，是否可以用它做几乎一个if / else语句，如：

@supports (display: flex) { 
    div { display: flex; }
} else { 
    div { display: none; }
}

我理解它可能不是关键词else，但是能够沿着这些线执行某些操作将是有益的。所以，总结并整理我的问题：

在不支持此CSS语法的旧浏览器中，使用@supports检查CSS属性支持的最佳方法是什么？
为此使用CSS和JS是否有意义或实用？
CSS if/else是否有某种@supports语法？

Answer 1

在不支持此CSS语法的旧浏览器中，使用[6]检查CSS属性支持的最佳方法是什么？

这完全取决于你要做的事情。如果您正在检查对属性的特定值的支持（例如@supports属性的flex），则提供回退值并让级联在大多数情况下为您处理它就足够了

使用您的示例，它就像：
一样简单
```
display
```
如果您正在处理旧浏览器可能不支持的整个属性，那么它完全取决于您在使用或不使用该属性时要完成的任务。例如，div { display: none; display: flex; }通常不会对布局产生任何不利影响，因此不支持它的旧版浏览器会优雅地降级，而无需执行任何其他操作。但是其他属性可能会对布局产生负面影响，您需要以不同的方式考虑不同的属性和布局配置。
为此使用CSS和JS是否有意义或实用？

如果您使用JS来覆盖尽可能多的基础，那么使用CSS可能是多余的，或者作为现代的非JS替代方案来解释已经禁用JS的用户。这也可能因您检测到的功能而异。

由于这大约是border-radius，因此值得注意的是，有一个名为@supports的JavaScript API，除了从JavaScript中调用它之外，其功能相同。如果您不担心禁用脚本的用户，您可以检查它是否已实现，如果是，则使用它，否则使用现有的功能检测代码：
```
CSS.supports
```
CSS var supported = false; if (window.CSS) { supported = window.CSS.supports('display', 'flex'); } else { // Your existing feature detection code here }是否有某种if/else语法？

CSS条件at-rules没有if / else语法，例如@supports和@supports，即使有，但不支持@media的浏览器可能会忽略其他部分。如果您需要考虑较旧的浏览器，您唯一的选择是使用如上所示的级联（即使浏览器支持不是问题，它也更简单，涵盖了大多数用例）。

另一种方法是复制条件并添加@supports以取消它，并且每个not规则中的CSS规则将是互斥的（如果您想要包含其他属性，这将非常有用应仅在属性不支持时应用，并且无法使用旧版浏览器的旧语法进行模拟：
```
@supports
```

CSS @supports vs通过JS检查支持

1 个答案: