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.
Summary
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.
: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.Examples
*:fullscreen {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
box-sizing:border-box;
width:100%;
height:100%;
object-fit:contain;
}
h1:fullscreen {
border:1px solid #f00;
}
p:fullscreen {
font-size: 200%;
}
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] | 11 -ms[2] | ? | 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) | Not supported | Not supported | Not supported |
| 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] Internet Explorer uses the prefix -ms but does not have a dash between full and screen: :-ms-fullscreen.