: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 wählt jedes Element aus, das sich derzeit im Vollbildmodus befindet. Wenn mehrere Elemente in den Vollbildmodus versetzt wurden, wählt diese Pseudoklasse alle aus.
Syntax
:fullscreen {
/* ... */
}
Verwendungshinweise
Die :fullscreen Pseudoklasse ermöglicht es Ihnen, Ihre Stylesheets so zu konfigurieren, dass die Größe, der Stil oder das Layout von Inhalten automatisch angepasst wird, wenn Elemente zwischen Vollbild und herkömmlicher Darstellung wechseln.
Beispiele
Styling eines Vollbild-Elements
In diesem Beispiel wird eine andere Hintergrundfarbe auf ein <div>-Element angewendet, je nachdem, ob es sich im Vollbildmodus befindet oder nicht. Es enthält einen <button>, um Vollbild ein- und auszuschalten.
<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>
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 stellt eine Ereignishandler-Funktion bereit, die das Vollbild umschaltet, wenn der <button> geklickt wird.
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
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # selectordef-fullscreen |
| Fullscreen API # css-pc-fullscreen |