: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
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL