:fullscreen
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die :fullscreen CSS Pseudoklasse trifft auf jedes Element zu, das sich aktuell im Vollbildmodus befindet. Wenn mehrere Elemente in den Vollbildmodus versetzt wurden, werden sie alle ausgewählt.
Syntax
:fullscreen {
/* ... */
}
Verwendungshinweise
Die :fullscreen Pseudoklasse ermöglicht es Ihnen, Ihre Stylesheets so zu konfigurieren, dass sie die Größe, den Stil oder das Layout von Inhalten automatisch anpassen, wenn Elemente zwischen Vollbild- und herkömmlichen Präsentationen wechseln.
Beispiele
Styling eines Vollbildelements
In diesem Beispiel wird ein anderer Hintergrundfarbe auf ein <div>-Element angewendet, je nachdem, ob es sich im Vollbildmodus befindet oder nicht. Es beinhaltet einen <button>, um den Vollbildmodus ein- und auszuschalten.
<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>
Die :fullscreen Pseudoklasse wird verwendet, um die background-color des <div> zu überschreiben, wenn es sich im Vollbildmodus befindet.
.element {
background-color: lightyellow;
}
.element:fullscreen {
background-color: lightpink;
}
Das folgende JavaScript bietet eine Eventhandler-Funktion, die den Vollbildmodus umschaltet, wenn auf den <button> geklickt wird.
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();
});
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # selectordef-fullscreen |
| Fullscreen API # css-pc-fullscreen |