: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
Explorer Edge Chrome Firefox Opera Safari
11127164586
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
71716450X10.0

Last updated by CSSPortal on: 25th November 2019