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

Функциональные запросы полезны для условной загрузки 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 внутри функционального запроса для браузеров без поддержки функциональных запросов? Будет ли браузер загружаться и использовать его? Или просто пропустите или проигнорируйте?


css browser-feature-detection
person jkdev    schedule 13.12.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

person jkdev    schedule 13.12.2018
comment
Имея в виду такое поведение, мне интересно, следует ли мне писать @supports, а также включать обнаружение Modernizr, чтобы охватить все вопросы? Было бы намного больше кода .. - person kyw; 10.05.2019
comment
Есть некоторые совпадения. @supports в файле CSS - это простой способ проверить возможности CSS. Modernizr является более всеобъемлющим и может также тестировать функции JavaScript. Если вы используете Modernizr, то использование @supports может быть излишним. - person jkdev; 12.06.2019