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

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 类似。如果浏览器不支持媒体查询/功能查询，它只会跳过它们以及里面的所有内容。