What exactly happens when a browser doesn't support feature queries?

Question

Feature queries are useful for loading CSS conditionally. They let you provide a section of CSS code only to browsers that support a specified feature.

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

However, many older browsers don't have support for feature queries.

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

For browsers without feature query support, what will happen to the CSS inside a feature query? Will the browser load and use it? Or just skip or ignore it?

Answer 1

Feature queries, and everything in them, are ignored by browsers that don't support them.

@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. */
}

For those browsers, you'll need to use other feature-detection tools such as Modernizr.

CSS media queries are similar. If a browser doesn't support media queries / feature queries, it just skips over them and everything inside.