Псевдокласс CSS `:fullscreen`

:fullscreen CSS псевдокласс соответствует каждому элементу, который в данный момент находится в полноэкранном режиме. Если в полноэкранный режим переведено несколько элементов, этот псевдокласс выбирает их все.

Синтаксис

:fullscreen {
  /* ... */
}

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

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

Примеры

Стилизация полноэкранного элемента

В этом примере к элементу <div> применяется разный цвет фона в зависимости от того, находится ли он в полноэкранном режиме. В примере есть <button>, переключающая полноэкранный режим.

<div class="element">
  <h1><code>:fullscreen</code> pseudo-class demo</h1>

  <p>
    This demo uses the <code>:fullscreen</code> pseudo-class to automatically
    change the background color of the <code>.element</code> div.
  </p>

  <p>
    Normally, the background is light yellow. In fullscreen mode, the background
    is light pink.
  </p>

  <button class="toggle">Toggle Fullscreen</button>
</div>

Псевдокласс :fullscreen используется для переопределения свойства background-color элемента <div>, когда он находится в полноэкранном режиме.

.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

В следующем коде JavaScript определена функция-обработчик события, которая переключает полноэкранный режим при нажатии на <button>.

document.querySelector(".toggle").addEventListener("click", (event) => {
  if (document.fullscreenElement) {
    // If there is a fullscreen element, exit full screen.
    document.exitFullscreen();
    return;
  }
  // Make the .element div fullscreen.
  document.querySelector(".element").requestFullscreen();
});

.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  padding: 1.2em;
}

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

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

См. также

• ::backdrop
• :xr-overlay
• модуль CSS-селекторов
• Руководство по Fullscreen API
• Fullscreen API
• DOM API: Element.requestFullscreen(), Document.exitFullscreen(), Document.fullscreenElement
• атрибут allowfullscreen