:fullscreen

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

Синтаксис

: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;
}

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

Specification Status Comment
Fullscreen API
Определение ':fullscreen' в этой спецификации.
Живой стандарт Первое определение.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:fullscreenChrome Полная поддержка 71
Полная поддержка 71
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
Edge Полная поддержка 12Firefox Полная поддержка 64
Полная поддержка 64
Нет поддержки 47 — 65
Отключено
Отключено From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Нет поддержки 9 — 65
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-full-screen
IE Полная поддержка 11
С префиксом
Полная поддержка 11
С префиксом
С префиксом Требует вендорный префикс: -ms-
Opera Полная поддержка 58
Полная поддержка 58
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
Safari Полная поддержка 6
Альтернативное имя
Полная поддержка 6
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
WebView Android Полная поддержка 71
Полная поддержка 71
Полная поддержка 37
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
Chrome Android Полная поддержка 71
Полная поддержка 71
Полная поддержка 18
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
Firefox Android Полная поддержка 64
Полная поддержка 64
Нет поддержки 47 — 65
Отключено
Отключено From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Нет поддержки 9 — 65
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-full-screen
Opera Android Полная поддержка 50
Полная поддержка 50
Полная поддержка 14
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 10.0
Полная поддержка 10.0
Полная поддержка 1.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-webkit-full-screen
Select all elements in the fullscreen stackChrome Нет поддержки НетEdge Нет поддержки 12 — 79Firefox Полная поддержка 43IE Полная поддержка 11Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 43Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

See also