CSS псевдокласс :fullscreen
Используйте CSS-селектор :fullscreen для выбора элемента, отображаемого в полноэкранном режиме. Узнайте о псевдоклассе и попрактикуйтесь на примерах.
Псевдокласс :fullscreen соответствует элементу, который в данный момент отображается в полноэкранном режиме. Он позволяет применять отдельный набор стилей для полноэкранного состояния, не затрагивая обычные стили элемента.
На этой странице объясняется, для чего нужен :fullscreen, как он связан с JavaScript Fullscreen API, как писать стили только для полноэкранного режима и какие типичные ошибки следует избегать.
Для чего нужен :fullscreen
Веб-страница не переходит в полноэкранный режим самостоятельно. Полноэкранный режим запрашивается через JavaScript Fullscreen API (element.requestFullscreen()), и этот вызов должен происходить в ответ на жест пользователя, например на клик — иначе браузеры блокируют его, чтобы предотвратить злоупотребления.
Как только элемент переходит в полноэкранный режим, браузер устанавливает для него состояние :fullscreen. Это сигнал для CSS: правила, написанные под :fullscreen, применяются только тогда, когда элемент занимает весь экран, и автоматически отменяются, как только пользователь выходит из режима (например, нажав Esc).
Это полезно, когда полноэкранный макет должен отличаться от встроенного — видеоплеер, скрывающий окружающие элементы управления, галерея изображений, растянутая до краёв экрана, или слайдшоу, переключающееся на тёмный фон.
Современные браузеры поддерживают псевдокласс :fullscreen без префиксов. Устаревшие префиксы -webkit- и -moz- в основном вышли из употребления, а -ms- больше не поддерживается. Горячая клавиша браузера F11 переводит всё окно в полноэкранный режим, но не активирует состояние :fullscreen для конкретного элемента — это делает только Fullscreen API.
Спецификация
Синтаксис
:fullscreen {
/* styles that apply only in fullscreen mode */
}Также можно ограничить область применения конкретным элементом, чтобы не затрагивать посторонние элементы:
.player:fullscreen {
background-color: #000;
}
/* descendants of the fullscreen element */
.player:fullscreen .controls {
display: flex;
}Поскольку переход в полноэкранный режим осуществляется через скрипт, стилизацию :fullscreen почти всегда сочетают с кнопкой, вызывающей requestFullscreen(), как показано ниже.
Пример селектора :fullscreen
Контейнер имеет небольшой размер во встроенном режиме. Когда кнопка переводит его в полноэкранный режим, правило :fullscreen меняет его цвет, растягивает на весь экран и отображает ранее скрытый текст.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 10px;
height: 200px;
width: 95%;
background-color: #1c87c9;
}
.example p {
visibility: hidden;
text-align: center;
color: #eeeeee;
font-size: 3em;
}
.example:fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>:fullscreen pseudo-class example</h2>
<div class="container">
<div class="example" id="example">
<p>Fullscreen mode</p>
</div>
<br />
<button onclick="document.getElementById('example').requestFullscreen();">Click here</button>
</div>
</body>
</html>Стилизация фона
Когда элемент переходит в полноэкранный режим, браузер рисует ::backdrop позади него, заполняя область, не перекрытую элементом (по умолчанию чёрного цвета). Вы можете изменить его стиль с помощью псевдоэлемента ::backdrop:
.example:fullscreen::backdrop {
background-color: #1c87c9;
}::backdrop также используется другими элементами верхнего слоя, например <dialog>, открытым через showModal(), поэтому он полезен не только для полноэкранного режима.
Типичные ошибки
- Ничего не происходит при загрузке страницы.
:fullscreenсрабатывает только после выполненияrequestFullscreen(); с помощью одного CSS войти в полноэкранный режим невозможно. - Запрос должен исходить от жеста пользователя. Вызов
requestFullscreen()вне обработчика клика, нажатия клавиши или аналогичного события будет отклонён браузером. - Используйте единицы viewport для задания размеров. В полноэкранном режиме элемент обычно должен иметь
width: 100vw; height: 100vh, чтобы действительно заполнять экран. F11— это не то же самое. Эта клавиша переводит в полноэкранный режим окно браузера, а не выбранный элемент, и не активирует:fullscreen.
Связанные селекторы
- CSS селектор :hover — стилизация элемента при наведении указателя.
- CSS селектор :focus — стилизация элемента, получившего фокус клавиатуры.
- CSS селектор :active — стилизация элемента в момент его активации.
- CSS свойство visibility — отображение или скрытие содержимого, как в примере выше.