: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 wendet sich auf jedes Element an, das sich aktuell im Vollbildmodus befindet. Wenn mehrere Elemente in den Vollbildmodus versetzt wurden, werden alle ausgewählt.

Syntax

css
: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 werden, wenn Elemente zwischen Vollbild- und herkömmlichen Präsentationsmodi wechseln.

Beispiele

Styling eines Vollbildelements

Dieses Beispiel wendet eine andere Hintergrundfarbe auf ein <div>-Element an, abhängig davon, ob es sich im Vollbildmodus befindet oder nicht. Es enthält einen <button>-Knopf, um zwischen Vollbildmodus ein- und auszuschalten.

html
<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.

css
.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

Der folgende JavaScript-Code enthält eine Ereignisbehandlungsfunktion, die den Vollbildmodus umschaltet, wenn der <button> geklickt wird.

js
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

Beispiel live ansehen.

Spezifikationen

Specification
Fullscreen API
# :fullscreen-pseudo-class

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch