W3cubDocs

/CSS

:fullscreen

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 applies to any element that's currently being displayed in full-screen mode. It selects not only to the top level element, but to the whole stack of elements that appears.

The W3C proposal uses the single word :fullscreen, that is without a dash, but both the Webkit and Gecko experimental implementations use a prefixed variant with two words linked by a dash: :-webkit-full-screen and :-moz-full-screen, respectively. Microsoft Edge and Internet Explorer use the standard syntax: :fullscreen and :-ms-fullscreen, respectively.

Syntax

:fullscreen { style properties }

Example

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p> This will become a big red text when on fullscreen.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>

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 Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 9.0 (9.0)
47.0 (47.0)[2] 		No support No support No support
Select all elements in the fullscreen stack ? 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.

See also

Edit this page on MDN

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen