Альтернативы 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, где можно найти множество примеров и попрактиковаться в их реализации перед внедрением в реальные проекты.

Полезные материалы

1. Can I use... Support tables for HTML5, CSS3, etc — Проверка поддержки свойства backdrop-filter современными браузерами.
2. The backdrop-filter CSS property | CSS-Tricks — Исчерпывающий обзор по свойству backdrop-filter и его полифилам.
3. HTML – CSS: Workaround to backdrop-filter? – Stack Overflow — Обсуждение возможных решений и альтернатив для свойства backdrop-filter.
4. backdrop-filter – CSS: Cascading Style Sheets | MDN — Официальная документация про backdrop-filter от MDN Docs.
5. Introducing Backdrop Filters | WebKit — Статья в блоге WebKit с подробным обзором свойства backdrop-filter.