Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
: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();
});
.element {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: sans-serif;
padding: 1.2em;
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # selectordef-fullscreen |
| Fullscreen API # css-pc-fullscreen |
Browser-Kompatibilität
Loading...