@supports в CSS: браузер говорит «да», но показывает «нет». Как так?
CSS-запрос @supports может врать: браузер рапортует поддержку, но код не работает. Рассказываем, почему так и что с этим делать.
CSS-свойство @supports задумывалось как спасательный круг для разработчиков: проверяешь поддержку фичи и подгружаешь fallback. Но на практике этот спасательный круг иногда оказывается дырявым. Браузер бодро отвечает «да, поддерживаю», а потом делает вид, что ничего не было. Знакомо? Как будто коллега сказал «задеплоил», а CI падает с красным флагом.
Проблема в том, что @supports проверяет только синтаксическую поддержку свойства, но не его реальное поведение. Например, браузер может знать о backdrop-filter, но не уметь его применять из-за отключенного аппаратного ускорения или бага. В итоге вы получаете true, а на экране — мыльный фон. Примерно как купить кроссовки по размеру, а они жмут в носке.
Особенно больно это бьет по разработчикам, которые пытаются использовать @supports для прогрессивного улучшения. Вы пишете: «Если поддерживается grid — используем grid», а браузер говорит «ага, поддерживаю», и тут же ломает верстку. Спасибо, кэп. Очередной баг, который заставляет вспомнить все проклятия в адрес IE6.
Решение? Не доверять @supports на 100%. Проверяйте поддержку вручную через CSS.supports() в JS или используйте библиотеки типа Modernizr. А еще — тестируйте на реальных устройствах, а не только в хромовском девтулсе. Потому что, как показывает практика, браузеры умеют удивлять.
Комментарий студии METABYTE: Мы тоже обжигались на @supports в одном из проектов. С тех пор наш девиз: «Доверяй, но проверяй — особенно если речь о CSS». Если хотите избежать таких сюрпризов в своем проекте — мы знаем, как подстелить соломку.