Альтернативы CSS backdrop-filter: решения на JS и другие
Быстрый ответ
Чтобы имитировать эффект backdrop-filter, примените к псевдоэлементу ::before
абсолютное позиционирование и фильтр размытия blur()
. Предоставьте прозрачность фону основного элемента, чтобы размытие было заметно.
.effect-behind {
position: relative;
background: transparent;
}
.effect-behind::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: inherit;
filter: blur(10px);
z-index: -1;
}
Также, подобный подход создаст визуальный эффект, близкий к использованию backdrop-filter, позволяя содержимому под элементом с классом .effect-behind
выглядеть размытым. Управляя параметром blur(10px)
, вы сможете контролировать степень размытия.
Учёт особенностей различных браузеров
Данные рекомендации – это отличное решение, однако важно учесть особенности разных браузеров. Вот несколько способов обеспечить надежность решения для будущего.
Использование @supports
Синтаксис @supports
позволяет писать максимально адаптивные стили. Он проверяет способность браузера обрабатывать свойства с конкретными значениями, что предоставляет возможность корректировки кода.
@supports (backdrop-filter: blur(2em)) {
.effect-behind {
backdrop-filter: blur(2em);
}
}
@supports not (backdrop-filter: blur(2em)) {
/* используйте здесь альтернативные стили */
}
Включение экспериментальных функций
Для некоторых браузеров, включая Chrome и Safari, потребуются дополнительные настройки или использование префиксов:
- Safari:
-webkit-backdrop-filter
- Chrome: Активируйте экспериментальные функции сайта по адресу
chrome://flags/#enable-experimental-web-platform-features
.
Полупрозрачные фоны как альтернатива
Для браузеров, не поддерживающих backdrop-filter
, можно использовать полупрозрачный фон. Это не создаст эффект размытия, но смягчит визуальный эффект.
.effect-behind {
background-color: rgba(255, 255, 255, 0.5);
}
Изучение SVG-фильтров
SVG-фильтры представляют собой мощную альтернативу для создания сложных визуальных эффектов. Тем не менее, их использование может снизить производительность и установить ограничения при работе с динамическим контентом.
Псевдоэлементы к вашим услугам
Используйте псевдоэлементы, чтобы создать визуальный эффект блёклости на заднем плане, внимательно работая со значением z-index.
.effect-faux {
position: relative;
}
.effect-faux::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: blur(10px);
z-index: -1;
}
Создание эффекта 'матового стекла'
Давайте визуализируем это.
🖼️ Прозрачное окно: элемент без эффекта.
🧊 Применение backdrop-filter: содержимое за элементом выглядит размыто, словно сквозь матовое стекло.
🖌️ Альтернативный метод: Использование полупрозрачной пленки достигает аналогичного эффекта.
До: [🏞 Чистый вид]
После: [🏞🔲🌫️ Эффект матового стекла]
Таким образом, вы создали эффект похожий на иней, без применения свойства backdrop-filter.
Стратегии для оптимизации работы
Попробуем добавить нечто новое в наши методы.
Динамическая проверка поддерживаемости браузером
С помощью JavaScript вы можете в реальном времени проверить поддержку браузером свойства backdrop-filter и при необходимости применить альтернативные стили.
Подготовка к будущему
Следите за информацией о поддержке свойств в официальных документациях и заметках к релизам браузеров. Например, начиная с версии Chrome 76, поддержка backdrop-filter обеспечена по умолчанию.
Обучение на практических примерах
Исследуйте такие платформы как CodePen или JSFiddle, где можно найти множество примеров и попрактиковаться в их реализации перед внедрением в реальные проекты.
Полезные материалы
- Can I use... Support tables for HTML5, CSS3, etc — Проверка поддержки свойства backdrop-filter современными браузерами.
- The backdrop-filter CSS property | CSS-Tricks — Исчерпывающий обзор по свойству backdrop-filter и его полифилам.
- HTML – CSS: Workaround to backdrop-filter? – Stack Overflow — Обсуждение возможных решений и альтернатив для свойства backdrop-filter.
- backdrop-filter – CSS: Cascading Style Sheets | MDN — Официальная документация про backdrop-filter от MDN Docs.
- Introducing Backdrop Filters | WebKit — Статья в блоге WebKit с подробным обзором свойства backdrop-filter.