This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The :fullscreen CSS pseudo-class selects any element that's displayed when the browser is in fullscreen mode.
/* Selects any <div> as long as it is being displayed in fullscreen mode */
/* Implemented in Gecko, Edge/IE, and WebKit/Chrome using prefixes */
/* Edge also supports the non-prefixed version */
div:-webkit-full-screen {
background-color: pink;
}
div:-moz-full-screen {
background-color: pink;
}
div:-ms-fullscreen {
background-color: pink;
}
div:fullscreen {
background-color: pink;
}
Note: The W3C spec uses the single word :fullscreen—without a dash—but both the Webkit and Gecko experimental implementations use a prefixed variant with two words separated by a dash: :-webkit-full-screen and :-moz-full-screen, respectively. Microsoft Edge and Internet Explorer use the standard convention: :fullscreen and :-ms-fullscreen, respectively.
Syntax
:fullscreen
Example
HTML
<div id="fullscreen"> <h1>:fullscreen Demo</h1> <p> This will become big red text when the browser is in fullscreen mode.</p> <button id="fullscreen-button">Enter Fullscreen</button> </div>
Javascript
var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv = document.getElementById("fullscreen");
var fullscreenFunc = fullscreenDiv.requestFullscreen;
if (!fullscreenFunc) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach(function (req) {
fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
});
}
function enterFullscreen() {
fullscreenFunc.call(fullscreenDiv);
}
fullscreenButton.addEventListener('click', enterFullscreen);
Browser-specific CSS
#fullscreen:-moz-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#fullscreen:-ms-fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#fullscreen:-webkit-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#fullscreen:-moz-full-screen > h1 {
color: red;
}
#fullscreen:-ms-fullscreen > h1 {
color: red;
}
#fullscreen:-webkit-full-screen > h1 {
color: red;
}
#fullscreen:-moz-full-screen > p {
color: DarkRed;
}
#fullscreen:-ms-fullscreen > p {
color: DarkRed;
}
#fullscreen:-webkit-full-screen > p {
color: DarkRed;
}
#fullscreen:-moz-full-screen > button {
display: none;
}
#fullscreen:-ms-fullscreen > button {
display: none;
}
#fullscreen:-webkit-full-screen > button {
display: none;
}
CSS
#fullscreen:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#fullscreen:fullscreen > h1 {
color: red;
}
#fullscreen:fullscreen > p {
color: DarkRed;
}
#fullscreen:fullscreen > button {
display: none;
}
Results
(If the 'Enter Fullscreen' button doesn't work, try here)
Specifications
| Specification | Status | Comment |
|---|---|---|
| Fullscreen API The definition of ':fullscreen' in that specification. |
Living Standard | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 15.0 -webkit[1] | 12 | 9.0 (9.0)-moz[1] 47.0 (47.0)[2] |
11 -ms[3] | ? | 6.0 -webkit[1] |
| Select all elements in the fullscreen stack | ? | 12 | 43 (43) | 11 | ? | ? |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 9.0 (9.0) 47.0 (47.0)[2] |
No support | No support | No support |
| Select all elements in the fullscreen stack | ? | (Yes) | 43.0 (43) | ? | ? | ? |
[1] Both the Webkit and Gecko prefixed versions have a dash between full and screen, but the W3C proposal uses one single word: :fullscreen, :-webkit-full-screen, :-moz-full-screen.
[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) implements the unprefixed pseudo-class behind the preference full-screen-api.unprefix.enabled, defaulting to false.
[3] Internet Explorer uses the prefix -ms but does not have a dash between full and screen: :-ms-fullscreen.