CSS :fullscreen-Pseudoklasse

Die :fullscreen-Pseudoklasse wählt ein Element aus, das im Vollbildmodus angezeigt wird, und formatiert es.

Beispiel für die CSS :fullscreen-Pseudoklasse

Der :fullscreen-Selektor wirkt, sobald der Vollbildmodus aktiviert wurde.

INFO

Moderne Browser unterstützen die unprefixede :fullscreen-Pseudoklasse. Veraltete -webkit-- und -moz--Präfixe sind weitgehend obsolet, und -ms- wird nicht mehr unterstützt.

Version

Fullscreen-API

Syntax

Beispiel für die CSS :fullscreen-Syntax

css

:fullscreen {
  css declarations;
}

Hinweis: Das Aktivieren des Vollbildmodus erfordert eine Benutzerinteraktion. Die Schaltfläche in diesem Beispiel löst diesen Trigger korrekt aus.

Beispiel für den :fullscreen-Selektor:

CSS :fullscreen-Codebeispiel

html

<!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>

Try it Yourself »

note
Sie können auch das Pseudo-Element :backdrop verwenden, um den Hintergrund hinter dem Vollbild-Element zu gestalten (z. B. :fullscreen::backdrop { background: #000; }).

Practice

Wie kann man eine Webseite gemäß dem W3Docs-Artikel in den Vollbildmodus versetzen?

Über die Fullscreen-APIÜber die F11-Taste auf der TastaturÜber die CSS-Eigenschaft 'fullscreen'Über die JavaScript-Methode 'fullscreen'

CSS :fullscreen-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :fullscreen-Selektor: ​

Practice ​

CSS :fullscreen-Pseudoklasse

Version

Syntax

Beispiel für den :fullscreen-Selektor:

Practice