:fullscreen

Синтаксис

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

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

Пример

В этом примере, цвет кнопки меняется в зависимости от того, находится ли документ в полноэкранном режиме. Он выполнен без принудительного изменения стиля посредством JavaScript.

HTML

HTML выглядит так:

<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>

<button> с ID "fs-toggle" будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.

CSS

Магия происходит в CSS. Используются два правила. Первое устанавливает цвет фона кнопки на "Toggle Full-screen Mode", когда элемент не находится в полноэкранном режиме. Для этого используется ключ :not(:fullscreen), который выглядит как элемент, не имеющий установленного псевдокласса :fullscreen.

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

Когда документ находится в полноэкранном режиме, применяется следующее правило CSS, устанавливающее цвет фона на оттенок бледно-красного.

#fs-toggle:fullscreen {
  background-color: #faa;
}

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

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

Смотрите также

• Fullscreen API
• Guide to the Fullscreen API
• :not
• ::backdrop
• DOM API: Element.requestFullscreen(), Document.exitFullscreen(), Document.fullscreenElement
• allowfullscreen attribute