env()

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

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

titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height

Переменные titlebar-area-* полезны для PWA, установленных на устройствах с десктопной операционной системой. Когда десктопное PWA использует значение display_override, то оно может использовать переменные titlebar-area-* , чтобы убедиться, что контент не накладывается на кнопки управления окном (например, сворачивание, разворачивание и закрытие).

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

Переменные keyboard-inset-* предоставляют информацию о виртуальной клавиатуре на экране. Они определяют прямоугольник по отступам сверху, справа, снизу и слева от края viewport (отступы по ширине и высоте рассчитываются из других отступов). Чтобы узнать больше, обратитесь к API виртуальной клавиатуры.

<env()> = 
  env( <custom-ident> <integer [0,∞]>* , <declaration-value>? )  

Чтобы указать браузеру использовать всё доступное пространство на экране и тем самым дать возможность использовать переменные env() , нужно добавить новое значение мета-тега viewport:

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

Затем вы можете использовать env() в вашем CSS:

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

В следующем примере используется env() для предотвращения перекрытия кнопок фиксированной панели инструментов приложения уведомлениями устройства, которые могут появляться в нижней части экрана. На десктопах safe-area-inset-bottom имеет значение 0. Однако на устройствах, отображающих уведомления в нижней части экрана, например, iOS, оно содержит значение, оставляющее место для отображения уведомления. Это значение затем используется в значении для padding-bottom , чтобы создать естественный для устройства зазор.

<main>Main content of app here</main>
<footer>
  <button>Go here</button>
  <button>Or here</button>
</footer>

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 1em system-ui;
}

main {
  flex: 1;
  background-color: #eee;
  padding: 1em;
}

footer {
  flex: none;
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
  background: black;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
  /* adds the safe-area-inset-bottom value to the initial 1em of padding.
  a larger black area will display for a device that has a positive value for this variable. */
  position: sticky;
  bottom: 0;
}

button {
  padding: 1em;
  background: white;
  color: black;
  margin: 0;
  width: 100%;
  border: none;
  font: 1em system-ui;
}

В следующем примере используется необязательный второй параметр env() , который позволяет указать значение по умолчанию на случай, если переменная среды недоступна.

<p>
  If the <code>env()</code> function is supported in your browser, this
  paragraph's text will have 50px of padding between it and the left border —
  but not the top, right and bottom. This is because the accompanying CSS is the
  equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other CSS
  properties, user agent property names are case-sensitive.
</p>

p {
  width: 300px;
  border: 2px solid red;
  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
    env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
}

/* zero for all rectangular user agents */
padding: env(safe-area-inset-bottom, 50px);

/* 50px because UA properties are case sensitive */
padding: env(Safe-area-inset-bottom, 50px);

/* as if padding: '50px 20px' were set because x is not a valid environment variable */
padding: env(x, 50px 20px);

/* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
padding: env(x, 50px, 20px);

Синтаксис значения по умолчанию, как и для настраиваемых свойств, позволяет использовать запятые. Однако, если значение свойства не поддерживает запятые, оно считается некорректным.

В следующем примере env() обеспечивает, что контент, отображаемый в десктопном прогрессивном веб-приложении, использующем API наложения управления окном, не перекрывается кнопками управления окном операционной системы. Значения titlebar-area-* определяют прямоугольник, где обычно отображалась строка заголовка. На устройствах, не поддерживающих функцию наложения управления окном, таких как мобильные устройства, используются значения по умолчанию.

Вот как обычно выглядит PWA, установленная на десктопном устройстве:

С функцией наложения управления окном веб-контент занимает всю область окна приложения, а кнопки управления окном и кнопки PWA отображаются в виде наложений:

<header>Title of the app here</header>
<main>Main content of app here</main>

header {
  position: fixed;
  left: env(titlebar-area-x);
  top: env(titlebar-area-y);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
}

main {
  margin-top: env(titlebar-area-height);
}

• var(…)
• Модуль CSS пользовательских свойств для каскадных переменных
• Пользовательские свойства (--*): переменные CSS
• Использование пользовательских свойств CSS (переменных)
• Настройка наложения элементов управления окном в строке заголовка вашего PWA
• Отображение содержимого в строке заголовка
• Выход за рамки