: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 entspricht jedem Element, das sich derzeit 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 automatisch die Größe, den Stil oder das Layout von Inhalten anpassen, wenn Elemente zwischen Vollbild- und herkömmlichen Präsentationen wechseln.
Beispiele
Styling eines Vollbildelements
In diesem Beispiel wird eine andere Hintergrundfarbe auf ein <div> Element angewendet, abhängig davon, ob es sich im Vollbildmodus befindet oder nicht. Es enthält 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 Ereignishandlerversion, die den Vollbildmodus umschaltet, wenn der <button> angeklickt 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 |
Browser-Kompatibilität
Loading…