So nutzen Sie die Fullscreen-API… und gestalten Sie sie

Schauen wir uns die Fullscreen-API in JavaScript an. Sie ermöglicht eine ziemlich mächtige Funktion: die Vollbildanzeige genau eines bestimmten Elements, das Sie wünschen. Nicht nur das, sondern auch CSS kann mit einem speziellen Selektor helfen.

Jeder wichtige Browser verfügt über eine integrierte Vollbildfunktionalität in Form der Maximierung des Browserfensters selbst. Sie drücken F11 oder ⌃⌘F (WinKey ⬆ unter PC) und der Browser füllt Ihren Monitor, bis hin zur Entfernung von UI-Komponenten (wie den Fenstermanagement-Schaltflächen).

Wenn Sie in den Vollbildmodus wechseln, wird der Platz für die Anzeige einer Webseite maximiert, aber das ist nicht immer genau das, was Sie wollen. Häufiger möchten Sie ein bestimmtes Element der Seite im Vollbildmodus anzeigen, z. B. ein Video oder ein Spiel. Hier ist die Fullscreen-API nützlich.

Die Fullscreen-API hilft bei etwas, das die Vollbildmodi des Browsers nicht können, wie zum Beispiel

• Vollbildanzeige eines bestimmten Elements der Seite und nicht der gesamten Seite.
• Abgleich von Elementen in CSS mit der Pseudoklasse :fullscreen, die prüft, ob das Vollbildflag eines bestimmten Elements gesetzt ist.
• Vollständige Kontrolle darüber, *wann* in den Vollbildmodus gewechselt werden soll.

Legen wir los

Entscheiden Sie zuerst, welches Element im Vollbildmodus angezeigt werden soll. Danach müssen Sie nur noch prüfen, ob dieses Element die Methode requestFullscreen() hat, und diese dann auf dem Element aufrufen.

Beginnen wir mit einem einfachen <div>-Element für die Vollbildanzeige

<div id="fullscreen"></div>

Zuerst wählen wir es aus und prüfen, ob es die Methode hat. Wenn ja, rufen wir die Methode requestFullscreen darauf auf. So einfach ist das.

let fullscreen = document.querySelector("#fullscreen");

if (fullscreen.requestFullscreen) {
  fullscreen.requestFullscreen();
}

Wir möchten diesen Code jedoch bedingt ausführen und nicht, sobald jemand auf der Seite landet. Wir erstellen eine Schaltfläche, die den Vollbildmodus umschaltet.

<div id="fullscreen">
  <button id="button">Toggle Fullscreen</button>
</div>

let fullscreen = document.querySelector("#fullscreen");
let button = document.querySelector("#button");

button.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    fullscreen?.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

Beachten Sie, wie wir document.fullscreenElement verwenden. Wenn ein Element bereits im Vollbildmodus war, wird es zurückgegeben; wenn nicht, wird null zurückgegeben.

Es ist auch ratsam zu prüfen, ob der Vollbildmodus im Browser des Benutzers überhaupt aktiviert wurde. Dafür können wir document.fullscreenEnabled verwenden. Es gibt einen booleschen Wert zurück, der besagt, ob wir die Fullscreen-API in diesem speziellen Browser verwenden können oder nicht. Der Vollbildmodus könnte vom Benutzer deaktiviert worden sein oder der Browser unterstützt ihn möglicherweise nicht.

Die letzte Methode, die wir behandeln werden, ist document.exitFullscreen(). Ein Benutzer sollte immer die Möglichkeit haben, den Vollbildmodus durch Drücken von ESC auf der Tastatur zu verlassen. Wir könnten eine benutzerdefinierte Methode zum Beenden des Vollbildmodus mit exitFullscreen implementieren. Es spielt keine Rolle, welches Element im Vollbildmodus war; nach dem Aufruf dieser Methode wird zum Fenstermodus zurückgekehrt.

Wie Sie im Code für unser Schaltflächenelement sehen können, prüfen wir zuerst, ob der Vollbildmodus bereits aktiviert wurde. Dann wechseln wir basierend auf dieser Information entweder in den Vollbildmodus oder zurück zum Fenstermodus.

Vollbildgestaltung

Das Coole an der Fullscreen-API ist, dass wir ein Vollbildelement in CSS abgleichen können. Genau dafür ist der Pseudoselektor :fullscreen gedacht!

#fullscreen:fullscreen {
  background-color: yellow;
}

Wie Sie sehen können, erhält das #fullscreen div eine gelbe Hintergrundfarbe, wenn das Element im Vollbildmodus ist, und nur im Vollbildmodus. Der Haken ist, dass wir nicht wirklich jedes Element so auswählen können; wir können nur das Wurzelelement auswählen, das sich im Vollbildmodus befindet. Keines der Kindelemente wird übereinstimmen.

Mit anderen Worten, etwas wie #button:fullscreen wählt keinen Button aus, der innerhalb des Vollbildelements enthalten ist – es sei denn, wir möchten, dass der Button im Vollbildmodus statt des Divs angezeigt wird.

Einige Browser erfordern ein Präfix, damit dies funktioniert. Firefox verwendet -moz-full-screen und WebKit-basierte Browser -webkit-full-screen.

#fullscreen:-webkit-full-screen {
  background-color: yellow;
}

#fullscreen:-moz-full-screen {
  background-color: yellow;
}

Wussten Sie, dass im Vollbildmodus ein Pseudoelement direkt unter Ihrem Vollbildelement gerendert wird? Standardmäßig ist dieses Pseudoelement schwarz. Wenn Sie die Stile dieses Pseudoelements ändern möchten, können Sie dies so tun:

#fullscreen::backdrop {
  background-color: skyblue;
}

Hier ist das endgültige Beispiel. Beachten Sie, dass der Vollbildmodus möglicherweise nicht mit eingebetteten Pens funktioniert. Sie müssen ihn daher außerhalb dieses Artikels anzeigen.