: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 выглядит так:
<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;
}
Спецификации
Specification |
---|
Fullscreen API Standard # :fullscreen-pseudo-class |
Совместимость с браузерами
BCD tables only load in the browser