:fullscreen

Die CSS-Pseudoklasse :fullscreen ermöglicht es Ihnen, Elemente auszuwählen und zu stylen, die sich gerade im Vollbildmodus befinden. Sie kennen doch diese Momente, in denen Sie ein Bild oder ein anderes Element den gesamten Bildschirm einnehmen lassen? Nun, wir können Elemente stylen, wenn sie sich in diesem Zustand befinden, und genau das ermöglicht uns :fullscreen.

.element:fullscreen {
  font-size: 3em;
  text-align: center;
}

Und in den Fällen, in denen mehr als ein Element im Vollbildmodus ist, wählt dies alle aus.

Vollbildmodus und die Fullscreen API

Ein wichtiger Hinweis: Es gibt einen Unterschied zwischen dem Umschalten Ihrer Anwendung in den Vollbildmodus auf Betriebssystemebene und dem Umschalten eines Elements in den Vollbildmodus. Wenn Sie in den Vollbildmodus Ihres Browsers wechseln (⌃+CMD+F unter MacOS, F11 unter Windows) und ein Element mit :fullscreen auswählen, wird dieses Element **nicht** übereinstimmen. Stattdessen stimmt ein Element mit :fullscreen überein, wenn es über die Fullscreen API in den Vollbildmodus wechselt.

let element = document.querySelector(".element");

element.requestFullscreen();

Nehmen wir also an, wir möchten den Inhalt eines <section>-Elements in der Mitte des Viewports zentrieren, wenn es sich im Vollbildmodus befindet. Wir zielen darauf mit :fullscreen ab und stylen es entsprechend.

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

Wir können die Kinder von Vollbild-Elementen auswählen

Ähnlich können wir die Kinder eines Elements auswählen, das im Vollbildmodus ausgewählt ist, sagen wir die Absätze in diesem <section>-Element.

section:fullscreen p {
  font-size: 2em;
}

Trick: Nur stylen, wenn nicht im Vollbildmodus

Und wenn wir Stile nur dann anwenden möchten, wenn das Element **nicht** im Vollbildmodus ist, können wir es zusammen mit der Pseudoklasse :not verwenden.

section:not(:fullscreen) {
  background: #eee;
}

Browser-Unterstützung

Einige ältere Browser benötigen möglicherweise ein Vendor-Präfix, wie z. B. :-ms-fullscreen in Internet Explorer 11.

IE	Edge	Firefox	Chrome	Safari	Opera
11 1	Alle	64 2	71 3	6 4	58 5

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Alle	Nein	91	Nein	62

Demo

Das folgende Demo zeigt, wie wir den Hintergrund des Bildelements im Vollbildmodus steuern können. Klicken Sie auf die Schaltfläche, um den Vollbildmodus für das Bild zu aktivieren und die Vollbildstile anzuwenden.

Weitere Informationen

Verwandt