Медиафункция CSS `display-mode`

Медиафункцию display-mode CSS медиафункция можно использовать, чтобы проверить, отображается ли веб-приложение в обычной вкладке браузера или каким-либо альтернативным способом, например как автономное приложение или в полноэкранном режиме.

Например:

• Прогрессивное веб-приложение может задать режим отображения, установив член display в манифесте. В этом случае значение display-mode указывает установленное значение (однако оно может отличаться от значения, запрошенного в манифесте, поскольку браузер может не поддерживать запрошенный режим).

• Любое веб-приложение может использовать Fullscreen API или Document Picture-in-Picture API, чтобы задать режим отображения; в этом случае значение display-mode указывает установленный режим.

Значение display-mode применяется к контексту просмотра верхнего уровня и всем дочерним контекстам просмотра.

Синтаксис

Для функции display-mode указывается одно из ключевых слов, перечисленных ниже.

browser

Приложение открывается в обычной вкладке или новом окне браузера — в зависимости от браузера и платформы.

fullscreen

Используется вся доступная область отображения, а элементы интерфейса браузера не отображаются. Это можно использовать, чтобы применять CSS только тогда, когда приложение было переведено в полноэкранный режим с помощью Fullscreen API или значения fullscreen члена display манифеста веб-приложения.

minimal-ui

Приложение выглядит и работает как автономное, но имеет минимальный набор элементов интерфейса для управления навигацией. Набор элементов зависит от браузера.

picture-in-picture

Этот режим позволяет пользователям продолжать просмотр определённого контента, взаимодействуя с другими сайтами или приложениями на устройстве. Приложение отображается в плавающем окне поверх всех остальных. Это можно использовать, чтобы применять CSS только тогда, когда приложение было переведено в режим «картинка в картинке» с помощью Document Picture-in-Picture API.

standalone

Приложение выглядит и работает как автономное. Например, у приложения может быть отдельное окно, собственный значок в панели запуска приложений и т. д. В этом режиме пользовательский агент не отображает элементы интерфейса для управления навигацией, но может отображать другие элементы интерфейса, например строку состояния.

window-controls-overlay

В этом режиме приложение выглядит и работает как автономное настольное приложение, а функция Window Controls Overlay включена.

Примеры

Применение CSS, если приложение работает в полноэкранном режиме

@media (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

Светлая и тёмная цветовые схемы для контента в режиме «картинка в картинке»

В этом примере мы объединяем значение display-mode: picture-in-picture с медиафункцией prefers-color-scheme, чтобы создать светлую и тёмную цветовые схемы, которые применяются в зависимости от предпочтений пользователя, но только когда приложение отображается в режиме «картинка в картинке».

@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
  body {
    background: antiquewhite;
  }
}

@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
  body {
    background: #333333;
  }

  a {
    color: antiquewhite;
  }
}

Дополнительную информацию и полный пример см. в разделе Использование Document Picture-in-Picture API.

Спецификации

Совместимость с браузерами

См. также

• Использование медиазапросов
• @media