: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 |