javascript - CSS @supports 与通过 JS 检查支持

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，但能够按照这些思路执行某些操作将是有益的。所以，总结和整理我的问题:

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

Answer 1

1. What is the best approach to checking CSS property support with @supports in older browsers not supporting this CSS syntax?

   这完全取决于您要执行的操作。如果您正在检查对某个属性的特定值的支持(例如 flex 用于 display 属性)，则提供一个备用值并让级联处理就足够了在大多数情况下，它适合你。

   使用您的示例，它很简单:

   div {
       display: none;
       display: flex;
   }
   

   如果您正在处理旧浏览器可能不支持的整个属性，那么这完全取决于您尝试使用或不使用该属性来完成什么。例如，border-radius 通常不会对布局产生任何不利影响，因此不支持它的旧浏览器会优雅地降级，而无需您执行任何其他操作。但其他属性可能会对布局产生不利影响，您需要以不同的方式考虑不同的属性和布局配置。

2. Would it make sense or be practical to utilize both CSS and JS for this?

   如果您使用 JS 来覆盖尽可能多的基础，那么使用 CSS 可能是多余的，或者用作现代的非 JS 替代方案，以解决禁用 JS 的用户的问题。这也可能因您检测到的特征类型而异。

   由于这是关于 @supports 的，值得注意的是有一个名为 CSS.supports 的 JavaScript API，除了您在 JavaScript 中调用它外，它的功能相同。如果您不担心禁用脚本的用户，您可以检查它是否已实现并使用它，否则您现有的功能检测代码:

   var supported = false;
   
   if (window.CSS) {
       supported = window.CSS.supports('display', 'flex');
   } else {
       // Your existing feature detection code here
   }
   

3. Is there some sort of if/else syntax for CSS @supports?

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

   另一种方法是复制条件并在前面加上 not 来否定它，并且每个 @supports 规则中的 CSS 规则将是互斥的(如果您希望包含仅当属性不支持时才应应用的其他属性，并且无法使用旧版浏览器的旧语法进行模拟):

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