:fullscreen

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Синтаксис

Error: could not find syntax for this item

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

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

Пример

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

HTML

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.

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

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

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

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

Specification
Fullscreen API Standard
# :fullscreen-pseudo-class

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

BCD tables only load in the browser

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