当浏览器不支持功能查询时究竟会发生什么？

Question

特征查询对于有条件地加载 CSS 很有用。它们允许您仅向支持特定功能的浏览器提供 CSS 代码部分。

@supports (feature-name: feature-value) {
    /* Some CSS code here, for browsers that support feature-name: feature-value */
}

但是，许多旧版浏览器不支持功能查询。

https://caniuse.com/#feat=css-featurequeries

对于不支持特征查询的浏览器，特征查询中的CSS会怎样？浏览器会加载并使用它吗？或者只是跳过或忽略它？

Answer 1

不支持它们的浏览器会忽略功能查询及其中的所有内容。

@supports (feature-name: feature-value) {
    /*  CSS inside the feature query is visible 
        only to browsers that support feature queries.
        Invisible to other browsers, 
        even if they support feature-name: feature-value. */
}

对于这些浏览器，您需要使用其他功能检测工具，例如 Modernizr。

CSS media queries 相似。如果浏览器不支持媒体查询/功能查询，它只会跳过它们和里面的所有内容。