CSS @supports vs通过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. @supports在不支持此CSS语法的旧浏览器中检查CSS属性支持的最佳方法是什么？
2. 为此使用CSS和JS是否有意义或实用？
3. if/elseCSS 有某种语法@supports吗？

Answer 1

1. @supports在不支持此CSS语法的旧浏览器中检查CSS属性支持的最佳方法是什么？

   这完全取决于你要做的事情.如果你正在检查一个属性(如特定值的支持flex的display属性),就足以提供一个备用的价值,让级联为您处理它在大多数情况下.

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

   div {
       display: none;
       display: flex;
   }
   

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

2. 为此使用CSS和JS是否有意义或实用？

   如果您使用JS来覆盖尽可能多的库,那么使用CSS可能是多余的,或者作为现代的非JS替代方案来解释已经禁用JS的用户.这可能也会根据您检测到的功能类型而有所不同.

   由于这是关于@supports,值得注意的是,CSS.supports除了从JavaScript中调用它之外,还有一个名为JavaScript的函数.如果您不担心禁用脚本的用户,您可以检查它是否已实现并使用它,如果是,或者您现有的功能检测代码:

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

3. if/elseCSS 有某种语法@supports吗？

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

   另一种方法是复制条件并使用prepend not来否定它,并且每个@supports规则中的CSS规则将是互斥的(如果要包含仅在不支持该属性时应该应用的其他属性,这将很有用,并且不能使用旧版浏览器的旧语法进行模拟):

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