:fullscreen
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The :fullscreenCSSpseudo-class matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.
Syntax
:fullscreen { /* ... */ } Usage notes
The :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between fullscreen and traditional presentations.
Examples
Styling a Fullscreen Element
This example applies a different background color to a <div> element, depending on whether or not it is in fullscreen mode. It includes a <button> to toggle fullscreen on and off.
<div class="element"> <h1>MDN :fullscreen pseudo-class demo</h1> <p> This demo uses the <code>:fullscreen</code> pseudo-class to automatically change the background color of the <code>.element</code> div. </p> <p> Normally, the background is light yellow. In fullscreen mode, the background is light pink. </p> <button class="toggle">Toggle Fullscreen</button> </div> The :fullscreen pseudo-class is used to override the background-color of the <div> when it is in fullscreen mode.
.element { background-color: lightyellow; } .element:fullscreen { background-color: lightpink; } The following JavaScript provides an event handler function that toggles fullscreen when the <button> is clicked.
document.querySelector(".toggle").addEventListener("click", function (event) { if (document.fullscreenElement) { // If there is a fullscreen element, exit full screen. document.exitFullscreen(); return; } // Make the .element div fullscreen. document.querySelector(".element").requestFullscreen(); }); Demo
Specifications
| Specification |
|---|
| Selectors Level 4 # selectordef-fullscreen |
| Fullscreen API # css-pc-fullscreen |
