Псевдокласс :fullscreen применяет стиль к элементам, которые отображаются в полноэкранном режиме.
Селектор :fullscreen работает, когда включается полноэкранный режим.
Селектор :fullscreen работает со -webkit-, -moz-, -ms- префиксами для максимальной совместимости браузера.
Версия
Fullscreen API
Синтаксис
:fullscreen {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</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:-webkit-full-screen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:-webkit-full-screen p {
visibility: visible;
}
.example:-moz-full-screen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:-moz-full-screen p {
visibility: visible;
}
.example:-ms-fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:-ms-fullscreen p {
visibility: visible;
}
.example:fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>Пример псевдокласса :fullscreen</h2>
<div class="container">
<div class="example" id="example">
<p>Fullscreen mode</p>
</div>
<br>
<button onclick="var el = document.getElementById('example'); el.webkitRequestFullscreen();">Нажмите сюда</button>
</div>
</body>
</html>В вышеприведенном примере нажмите на кнопку и увидите элемент в полноэкранном режиме.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 15.0-webkit- | 12.0+ | 64.0+ |
6.0 -webkit- |
15.0 -webkit- |
Практикуйте свои знания
Как работает псевдокласс :fullscreen в CSS?
Правильный!
Неправильно!