: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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:fullscreen
Select all elements in the fullscreen stack

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

Siehe auch