env()

Функция env() используется для вставки значения переменной среды, определенной юзер-агентом, в ваш CSS. Это почти то же самое, что и var() в CSS, но env() переменные определяются агентом пользователя, не самим пользователем. Эти переменные имеют глобальную область действия.

Свойство поддерживается всеми основными браузерами. Если мы хотим использовать современные CSS функции для поллифилизации со старыми браузерами, можно взять плагин PostCSS PostCSS Preset Env.

Второе значение в скобках — запасное. Если переменная не определена, будет использован 16px.

        
          
          .element {  margin-bottom: env(safe-area-inset-bottom, 16px);}
          .element {
  margin-bottom: env(safe-area-inset-bottom, 16px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обратите внимание, что значения свойств внутри env() чувствительны к регистру. Свойство и значение свойства записываются в таком формате:

        
          
          property: env(переменная, запасное-значение);
          property: env(переменная, запасное-значение);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Где переменная – это имя системной переменной (например, safe-area-inset-top). Запасное значение опционально на случай, если переменная недоступна.

Использование переменных:

        
          
          env(safe-area-inset-top);env(safe-area-inset-right);
          env(safe-area-inset-top);
env(safe-area-inset-right);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переменные + запасные значения:

        
          
          env(safe-area-inset-top, 20px);env(safe-area-inset-right, 1em);
          env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переменные safe-area-inset-* задают отступы от краёв области просмотра. Вместе они образуют прямоугольник — безопасную зону для контента. На обычных экранах (например, ноутбуках) эта зона совпадает с краями, и ничего не обрезается. А вот на нестандартных дисплеях (например, круглых часах) всё, что внутри этой зоны, точно будет видно. То, что выходит за её пределы, может не отобразиться. Размер зоны определяет система.

Чтобы занять всё доступное пространство на экране, нужно добавить специальный параметр во вьюпорт. Он включит поддержку переменных env():

        
          
          <meta name="viewport" content="viewport-fit=cover">
          <meta name="viewport" content="viewport-fit=cover">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Дальше мы указываем, какие именно отступы хотим задать, и с какими значениями. В примере ниже у тега body устанавливаются отступы со всех четырёх сторон:

        
          
          body {  padding:    env(safe-area-inset-top, 40px)    env(safe-area-inset-right, 40px)    env(safe-area-inset-bottom, 40px)    env(safe-area-inset-left, 40px);}
          body {
  padding:
    env(safe-area-inset-top, 40px)
    env(safe-area-inset-right, 40px)
    env(safe-area-inset-bottom, 40px)
    env(safe-area-inset-left, 40px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функцию env() можно использовать внутри любого CSS-свойства — как часть значения или даже в медиазапросах.

Переменные safe-area-inset-* изначально появились в iOS, чтобы разработчики могли располагать контент в безопасной зоне — там, где его точно не обрежет экран. Сейчас они полезны и на других устройствах с необычными формами экрана.

Частая проблема, которую решает env() — это всплывающие уведомления (пуши), которые могут перекрывать элементы интерфейса. Если задавать фиксированные блоки с учётом env(), они останутся в видимой области и не будут перекрыты.

env() можно применять и в PWA. Такие приложения используют пространство окна по максимуму, включая область, где обычно находится заголовок окна. Переменные titlebar-area-* позволяют размещать элементы прямо в этой зоне, не мешая системным кнопкам.

А переменные keyboard-inset-* сообщают, где на экране появилась виртуальная клавиатура. С их помощью можно узнать отступы от краёв и адаптировать интерфейс так, чтобы элементы не прятались за клавиатуру.

Ниже — пример, как использовать переменные titlebar-area-*, чтобы создать свой заголовок окна, который будет корректно работать в полноэкранном режиме:

        
          
          <head>  <meta name="viewport" content="viewport-fit=cover"></head><body>  <header id="titlebar">My Custom Title Bar</header>  <main>App Content Goes Here</main></body>
          <head>
  <meta name="viewport" content="viewport-fit=cover">
</head>
<body>
  <header id="titlebar">My Custom Title Bar</header>
  <main>App Content Goes Here</main>
</body>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Добавляем стили:

        
          
          #titlebar {  position: fixed;  inset-inline-start:    env(titlebar-area-x, 0); /* Позиция по X (если не поддерживается — 0) */  inset-block-start:    env(titlebar-area-y, 0);  /* Позиция по Y */  display: flex;  align-items: center;  padding-inline-start: 16px;  inline-size:    env(titlebar-area-width, 100%); /* Ширина заголовка */  block-size:    env(titlebar-area-height, 40px); /* Высота */  background-color: #6200ee;  color: white;}/* Сдвигаем основной контент, чтобы он не перекрывался */main {  margin-top: env(titlebar-area-height, 40px);  padding: 16px;}
          #titlebar {
  position: fixed;
  inset-inline-start:
    env(titlebar-area-x, 0); /* Позиция по X (если не поддерживается — 0) */
  inset-block-start:
    env(titlebar-area-y, 0);  /* Позиция по Y */
  display: flex;
  align-items: center;
  padding-inline-start: 16px;
  inline-size:
    env(titlebar-area-width, 100%); /* Ширина заголовка */
  block-size:
    env(titlebar-area-height, 40px); /* Высота */
  background-color: #6200ee;
  color: white;
}

/* Сдвигаем основной контент, чтобы он не перекрывался */
main {
  margin-top: env(titlebar-area-height, 40px);
  padding: 16px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Получаем результат, который хотели получить.

safe-area-inset-top;
safe-area-inset-right;
safe-area-inset-bottom;
safe-area-inset-left;

titlebar-area-x;
titlebar-area-y;
titlebar-area-width;
titlebar-area-height;

keyboard-inset-top;
keyboard-inset-right;
keyboard-inset-bottom;
keyboard-inset-left;
keyboard-inset-width;
keyboard-inset-height;