Если «бровки» и «чёлки» устройства заслоняют контент — env() придёт на помощь.
Функция env() используется для вставки значения переменной среды, определенной юзер-агентом, в ваш CSS. Это почти то же самое, что и var() в CSS, но env() переменные определяются агентом пользователя, не самим пользователем. Эти переменные имеют глобальную область действия.
🕵️Агентами пользователя часто называют браузеры.
Свойство уже поддерживается во всех современных браузерах. А если нужно добавить поддержку для старых версий, можно использовать плагин PostCSS Preset Env – он преобразует современные CSS-функции в полифилы.
Пример
.element {
margin-bottom: env(safe-area-inset-bottom, 16px);
}Второе значение в скобках — запасное. Если переменная не определена, значение будет равно 16px.
Переменные safe-area-inset-* изначально появились в iOS, чтобы разработчики могли располагать контент в безопасной зоне — там, где его точно не обрежет экран. Сейчас они полезны и на других устройствах с необычными формами экрана.
Частая проблема, которую решает env() — это всплывающие уведомления (пуши), которые могут перекрывать элементы интерфейса. Если задавать фиксированные блоки с учётом env(), они останутся в видимой области и не будут перекрыты.
env() можно применять и в PWA. Такие приложения используют пространство окна по максимуму, включая область, где обычно находится заголовок окна. Переменные titlebar-area-* позволяют размещать элементы прямо в этой зоне, не мешая системным кнопкам.
А переменные keyboard-inset-* сообщают, где на экране появилась виртуальная клавиатура. С их помощью можно узнать отступы от краёв и адаптировать интерфейс так, чтобы элементы не прятались за клавиатуру.
👉 @frontendInterview
