CSS env()

Если ты хочешь, чтобы твой интерфейс корректно работал на устройствах с “чёлкой”, закруглёнными краями, вкладками, виртуальной клавиатурой или даже складными экранами - тебе пригодится функция env() в CSS. Она позволяет использовать специальные средовые (environment) переменные, определяемые браузером или системой, и адаптировать стили под особенности устройства.

Что такое `env()`

Функция env() позволяет вставить значение переменной среды (environment-variable), определяемой агентом пользователя (браузером), в CSS. developer.mozilla.org+2GeeksforGeeks+2
Синтаксис:

env(<environment-variable>, <fallback>)

где <environment-variable> — имя переменной (например safe-area-inset-top), а <fallback> — значение, которое будет использовано, если браузер не поддерживает или не определил эту переменную. developer.mozilla.org+1
Эти переменные глобальны для документа (не наследуются, не зависят от конкретного элемента) и не ведут себя как обычные CSS-кастомные свойства. bitsofcode+1

Когда и зачем использовать

Основной и очевидный кейс: устройства с “безрамочным” экраном, вырезом (notch), закруглениями, где браузер предоставляет значения safe-area-inset-top, safe-area-inset-bottom и др. Например:

padding-bottom: env(safe-area-inset-bottom);

Это поможет твоему футеру не скрываться за системной панелью. developer.mozilla.org+1
Другие случаи: устройства с несколькими сегментами экрана (например, складные экранные устройства), где используются viewport-segment-width, viewport-segment-height. developer.mozilla.org
Также: настольные PWA-приложения, где окно покрывает всю поверхность и появляются зоны контролов, например titlebar-area-width, titlebar-area-height. developer.mozilla.org
Вывод: env() даёт «знание» о внешней среде устройства и позволяет адаптировать стили, когда обычные единицы или кастомные свойства не подходят.

Пример использования

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<body>
  <footer class="bottom-nav">
    <!-- навигация -->
  </footer>
</body>

CSS:

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
}

Так ты обеспечиваешь, что блок навигации не окажется под “жестовой” полосой или панелью на мобильном устройстве. (пример основан на статье) Medium+1

Советы и нюансы

Meta-тег: Для корректной работы безопасной зоны на iOS нужно добавить <meta name="viewport" content="viewport-fit=cover">. Без этого env(safe-area-inset-… ) может быть нулём. Medium+1
Фолбэки (fallback): Всегда хорошо указывать. Если браузер не поддерживает данную переменную — использовать запасное значение. Например: env(safe-area-inset-top, 20px). bitsofcode+1
Юнит: Значение, возвращаемое env(), уже содержит единицу (например px), не добавляй px после вызова. При комбинировании с другими значениями используй calc(). См. пример из StackOverflow: height: calc(50px + env(safe-area-inset-bottom)). Stack Overflow
Поддержка браузеров: Функция поддерживается многими современными браузерами. caniuse.com+1
Названия чувствительны к регистру: Например, safe-area-inset-top ≠ SAFE-AREA-INSET-TOP. udn.realityripple.com
Не переборщи: Если устройство обычное и нет особых зон, env() будет нулём - и всё будет работать как обычно. Например, env(safe-area-inset-left) для обычного монитора будет 0. developer.mozilla.org

Итог

Функция env() - это мощный инструмент, который помогает адаптировать стили UI к особенностям устройств: вырезы, панели, складные экраны и т.д. Это особенно важно при современном фронтенд-разработке, где “универсальность” интерфейса всё важнее. Если ты хочешь, чтобы твой проект выглядел и работал правильно наезде на разные устройства - env() стоит взять в арсенал.