This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The :fullscreen
CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
/* Selects any <div> that is being displayed in fullscreen mode */ /* Implemented in Firefox, WebKit/Chrome, and Edge/IE using prefixes; Edge also supports the non-prefixed version */ div:-moz-full-screen { background-color: pink; } div:-webkit-full-screen { 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 text will become big and red 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:-webkit-full-screen { padding: 42px; background-color: pink; border: 2px solid #f00; font-size: 200%; } #fullscreen:-moz-full-screen > h1 { color: red; } #fullscreen:-webkit-full-screen > h1 { color: red; } #fullscreen:-moz-full-screen > p { color: darkred; } #fullscreen:-webkit-full-screen > p { color: darkred; } #fullscreen:-moz-full-screen > 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
Click here to try out this example.
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
.