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

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