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:fullscreenCSS-Pseudoklasse passt auf jedes Element, das sich momentan im Vollbildmodus befindet. Wenn mehrere Elemente im Vollbildmodus sind, werden alle ausgewählt.
Syntax
:fullscreen { /* ... */}Hinweise zur Verwendung
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 traditionellen Präsentationen wechseln.
Beispiele
Stil eines Vollbildelements
Dieses Beispiel weist einem<div>-Element je nach Vollbildmodus eine andere Hintergrundfarbe zu. Es enthält einen<button>, um Vollbild an- und auszuschalten.
<div> <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>Toggle Fullscreen</button></div>Die:fullscreen Pseudoklasse wird verwendet, um diebackground-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 Vollbild umschaltet, wenn der<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();});.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 |