Что именно происходит, когда браузер не поддерживает запросы функций?

Question

Функциональные запросы полезны для условной загрузки CSS. Они позволяют вам предоставлять раздел кода CSS только для браузеров, которые поддерживают указанную функцию.

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

Однако многие старые браузеры не поддерживают запросы функций.

https://caniuse.com/

Что произойдет с 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 медиа-запросы похожи. Если браузер не поддерживает медиа-запросы / запросы функций, он просто пропускает их и все внутри.