CSS :fullscreen Pseudo-Klasse

Die Pseudoklasse :fullscreen trifft auf ein Element zu, das derzeit im Vollbildmodus angezeigt wird. Sie ermöglicht es, einen separaten Satz von Stilen für den Vollbildzustand zu definieren, ohne die normalen Stile des Elements zu verändern.

Diese Seite erklärt, was :fullscreen bewirkt, wie es mit der JavaScript Fullscreen API zusammenhängt, wie man Stile nur für den Vollbildmodus schreibt und welche häufigen Fallstricke zu beachten sind.

Wofür :fullscreen verwendet wird

Eine Webseite wechselt nicht von selbst in den Vollbildmodus. Der Vollbildmodus wird über die JavaScript Fullscreen API (element.requestFullscreen()) angefordert, und dieser Aufruf muss als Reaktion auf eine Benutzergeste wie einen Klick erfolgen — andernfalls blockieren Browser ihn, um Missbrauch zu verhindern.

Sobald sich ein Element im Vollbildmodus befindet, setzt der Browser den Zustand :fullscreen darauf. Das ist Ihr Signal in CSS: Regeln, die unter :fullscreen geschrieben sind, gelten nur, während das Element den Bildschirm füllt, und werden automatisch zurückgesetzt, sobald der Benutzer den Modus verlässt (zum Beispiel durch Drücken von Esc).

Dies ist nützlich, wenn das Vollbild-Layout vom eingebetteten Layout abweichen soll — ein Videoplayer, der sein umgebendes Chrome ausblendet, eine Bildergalerie, die randlos angezeigt wird, oder eine Diashow, die auf einen dunklen Hintergrund umschaltet.

Info

Moderne Browser unterstützen die Pseudoklasse :fullscreen ohne Präfix. Veraltete -webkit-- und -moz--Präfixe sind weitgehend überholt, und -ms- wird nicht mehr unterstützt. Die Browser-Tastenkombination F11 versetzt das gesamte Fenster in den Vollbildmodus, löst jedoch den Zustand :fullscreen für ein bestimmtes Element nicht aus — das tut nur die Fullscreen API.

Spezifikation

Fullscreen API

Syntax

:fullscreen {
  /* styles that apply only in fullscreen mode */
}

Sie können den Selektor auch auf ein bestimmtes Element beschränken, damit andere Elemente nicht betroffen sind:

.player:fullscreen {
  background-color: #000;
}

/* descendants of the fullscreen element */
.player:fullscreen .controls {
  display: flex;
}

Da der Vollbildmodus per Skript aufgerufen wird, kombiniert man :fullscreen-Stile fast immer mit einem Button, der requestFullscreen() aufruft, wie unten gezeigt.

Beispiel des :fullscreen-Selektors

Der Container ist im eingebetteten Zustand klein. Wenn der Button ihn in den Vollbildmodus versetzt, ändert die :fullscreen-Regel seine Farbe, dehnt ihn so aus, dass er den Bildschirm ausfüllt, und zeigt den zuvor versteckten Text an.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 10px;
        height: 200px;
        width: 95%;
        background-color: #1c87c9;
      }
      .example p {
        visibility: hidden;
        text-align: center;
        color: #eeeeee;
        font-size: 3em;
      }
      .example:fullscreen {
        background-color: #8ebf42;
        width: 100vw;
        height: 100vh;
      }
      .example:fullscreen p {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <h2>:fullscreen pseudo-class example</h2>
    <div class="container">
      <div class="example" id="example">
        <p>Fullscreen mode</p>
      </div>
      <br />
      <button onclick="document.getElementById('example').requestFullscreen();">Click here</button>
    </div>
  </body>
</html>

Probier es selbst »

Den Hintergrund gestalten

Wenn ein Element in den Vollbildmodus wechselt, zeichnet der Browser ein ::backdrop dahinter, das jeden Bereich füllt, den das Element nicht abdeckt (standardmäßig schwarz). Sie können es mit dem Pseudo-Element ::backdrop neu gestalten:

.example:fullscreen::backdrop {
  background-color: #1c87c9;
}

Hinweis

::backdrop wird auch von anderen Top-Layer-Elementen wie <dialog> verwendet, das mit showModal() geöffnet wird, und ist daher auch abseits des Vollbildmodus nützlich.

Häufige Fallstricke

Beim Laden der Seite passiert nichts. :fullscreen trifft nur zu, nachdem requestFullscreen() ausgeführt wurde; es gibt keine reine CSS-Methode, um den Vollbildmodus zu aktivieren.
Die Anfrage muss von einer Benutzergeste ausgehen. Der Aufruf von requestFullscreen() außerhalb eines Klicks, Tastendrucks oder ähnlichen Ereignisses wird vom Browser abgelehnt.
viewport-Einheiten für die Größe verwenden. Im Vollbildmodus sollte das Element in der Regel width: 100vw; height: 100vh haben, damit es den Bildschirm tatsächlich ausfüllt.
F11 ist nicht dasselbe. Es versetzt das Browserfenster in den Vollbildmodus, nicht ein bestimmtes Element, und setzt :fullscreen nicht um.

Übung

Welche Möglichkeiten gibt es laut dem Artikel von W3Docs, eine Webseite in den Vollbildmodus zu versetzen?

Mit der Fullscreen APIMit der Taste F11 auf der TastaturMit der CSS-Eigenschaft 'fullscreen'Mit der JavaScript-Methode 'fullscreen'