Limited availability
The :fullscreen CSS pseudo-class matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.
:fullscreen {
/* ... */
}
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.
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><code>:fullscreen</code> 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", (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();
});
.element {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: sans-serif;
padding: 1.2em;
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4