:fullscreen CSS Pseudo Class
Description
The :fullscreen
pseudo-class applies to elements when the browser is in full-screen mode. At the same time, the window title, address bar, tabs, menus and other standard elements are hidden and the browser is displayed in full screen. To switch from standard mode to full screen and vice versa, the F11 key is usually used.
Syntax
element:fullscreen { … }
Example
<div class="container">
<p><em>Click the button below to enter the element into fullscreen mode.</em></p>
<div class="element" id="element">
<p>I'm in fullscreen mode!</p>
</div>
<br>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>
</div>
em {
font-size: 0.9em;
}
.container {
width: 90%;
}
.element {
padding: 20px;
height: 100px;
width: 100%;
background-color: #7ef3d1;
}
.element p {
visibility: hidden;
text-align: center;
color: white;
font-size: 3em;
}
.element:-webkit-full-screen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:-webkit-full-screen p {
visibility: visible;
}
.element:-moz-full-screen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:-moz-full-screen p {
visibility: visible;
}
.element:-ms-fullscreen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e07ef3;
width: 100vw;
height: 100vh;
}
.element:fullscreen p {
visibility: visible;
}
Notes
Internet Explorer supports the pseudo -class: -ms-fullscreen.
Chrome, Opera, Safari support the pseudo -class: -webkit-full-screen.
Firefox supports the pseudo-class : -moz-full-screen.
Pseudo-classes for each browser should be written separately, but not separated by commas.
Browser Support
Desktop | |||||
11 | 12 | 71 | 64 | 58 | 6 |
Tablets / Mobile | |||||
![]() |
|||||
71 | 71 | 64 | 50 | X | 10.0 |
Last updated by CSSPortal on: 25th November 2019