:fullscreen

CSS Псевдокласс :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