CSS backdrop-filter — синтаксис и примеры
CSS-свойство backdrop-filter: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Когда применять
В материале о «backdrop-filter» основное внимание уделено области «цвет и отрисовка». Свойство backdrop-filter относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. Проверяйте поведение «backdrop-filter» в форме, где часть полей становится недоступной, причём не считайте один браузер достаточной проверкой.
Проверяя «backdrop-filter», соблюдайте правило: проверяйте backdrop-filter вместе с родительским контекстом и соседними правилами. Для «backdrop-filter» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис backdrop-filter
Для демонстрации «backdrop-filter» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.demo {
backdrop-filter: #2563eb;
}Как работает backdrop-filter
Чтобы объяснить работу «backdrop-filter», проследите путь от структуры и входного значения до отображения или поведения. Свойство backdrop-filter относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. Контрольная точка для «backdrop-filter» — изменение при prefers-reduced-motion.
Проверка в проекте
- Проверьте вычисленное значение backdrop-filter, наследование и контекст родителя; результат относится непосредственно к «backdrop-filter».
- Включить направление rtl и проверить логические стороны раскладки при разборе «backdrop-filter».
- Проверьте «backdrop-filter» в форме, где часть полей становится недоступной через порядок фокуса в дереве доступности и запишите наблюдаемое изменение.
Оставляйте «backdrop-filter» в решении только после проверки в форме, где часть полей становится недоступной. Если нативная конструкция решает задачу «backdrop-filter» с меньшим числом условий, используйте её.
Практика с backdrop-filter
Перенесите «backdrop-filter» в изолированном демо и испытайте его в форме, где часть полей становится недоступной. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «backdrop-filter»: изолированная декларация backdrop-filter без связанных ограничений может дать другой результат в реальном компоненте.
Сценарий: в форме, где часть полей становится недоступной.
Ошибки при работе с backdrop-filter
Контекст
Изолированная декларация backdrop-filter без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «backdrop-filter».
Устойчивость
Скрытие фокуса без равноценной заметной замены при использовании «backdrop-filter».
Доступность
Подмена семантики визуально похожим div или span; для «backdrop-filter» проверьте это отдельно.
Поддержка backdrop-filter
Для «backdrop-filter» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «backdrop-filter»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о backdrop-filter
Как понять, что «backdrop-filter» выбрано правильно?
«backdrop-filter» выбрано правильно, когда оно решает задачу «определять визуальный слой элемента без изменения смысловой структуры документа», сохраняет результат в форме, где часть полей становится недоступной и проходит предметную проверку: проверьте вычисленное значение backdrop-filter, наследование и контекст родителя.
Нужен ли запасной вариант для «backdrop-filter»?
Запасной вариант для «backdrop-filter» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «backdrop-filter» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.