Die großen, kleinen und dynamischen Darstellungsbereiche

Neue CSS-Anzeigenblöcke, die mobile Darstellungsbereiche mit dynamischen Symbolleisten berücksichtigen

Bramus

Der Darstellungsbereich und seine Einheiten

Um etwas, das so hoch wie der Darstellungsbereich ist, zu vergrößern, können Sie die Einheiten vw und vh verwenden.

  • vw = 1% der Breite des Darstellungsbereichs
  • vh = 1% der Höhe des Darstellungsbereichs

Wenn Sie einem Element eine Breite von 100vw und eine Höhe von 100vh zuweisen, deckt es den Darstellungsbereich vollständig ab.

Ein hellblaues Element mit einer Größe von 100 × 100 VH, das den gesamten Darstellungsbereich abdeckt Der Darstellungsbereich selbst wird durch eine blaue gestrichelte Kontur dargestellt.
Ein hellblaues Element, das auf 100 x 100 vh eingestellt ist und den gesamten Darstellungsbereich abdeckt.
Der Darstellungsbereich selbst wird durch eine blau gestrichelte Rahmenlinie dargestellt.

Die Anzeigenblöcke vw und vh erzielten Browser mit diesen zusätzlichen Anzeigenblöcken.

  • vi = 1% der Größe der Inline-Achse des Darstellungsbereichs
  • vb = 1% der Größe der Blockachse des Darstellungsbereichs
  • vmin ist der kleinere Wert vw oder vh.
  • vmax = der größere Wert von vw oder vh.

Diese Einheiten bieten eine gute Browserunterstützung.

Unterstützte Browser

  • 20
  • 12
  • 19
  • 6

Neue Einheiten für den Darstellungsbereich

Während die bisherigen Anzeigenblöcke auf Desktop-Computern gut funktionieren, ist das auf Mobilgeräten anders. Die Größe des Darstellungsbereichs wird dort davon beeinflusst, ob dynamische Symbolleisten vorhanden sind oder fehlen. Dies sind Benutzeroberflächen wie Adressleisten und Tableisten.

Die Größe des Darstellungsbereichs kann sich zwar ändern, die Größen vw und vh jedoch nicht. Daher werden Elemente mit einer Höhe von 100vh aus dem Darstellungsbereich ausgeblendet.

100 vh auf Mobilgeräten sind beim Laden zu hoch.
100 vh auf Mobilgeräten sind beim Laden zu hoch.

Wenn Sie nach unten scrollen, werden diese dynamischen Symbolleisten wieder geschlossen. In diesem Status decken Elemente mit einer Höhe von 100vh den gesamten Darstellungsbereich ab.

100vh auf Mobilgeräten ist „richtig“, wenn die User-Agent-Benutzeroberflächen zurückgezogen sind.
100 vh auf Mobilgeräten ist „richtig“, wenn die User-Agent-Benutzeroberfläche zurückgezogen ist.

Um dieses Problem zu lösen, wurden die verschiedenen Status des Darstellungsbereichs in der Preisvergleichsportal-Arbeitsgruppe angegeben.

  • Großer Darstellungsbereich: Größe des Darstellungsbereichs unter der Annahme, dass UA-Schnittstellen, die zum Zurückziehen dynamisch erweitert und zurückgezogen werden, berücksichtigt werden.
  • Kleiner Darstellungsbereich: Die Größe des Darstellungsbereichs unter der Annahme, dass alle UA-Schnittstellen, die zum Maximieren dynamisch erweitert und zurückgezogen werden, vorausgesetzt werden.
Visualisierungen der großen und kleinen Darstellungsbereiche
Darstellungen des großen und kleinen Darstellungsbereichs.

Den neuen Darstellungsbereichen wurden ebenfalls Einheiten zugewiesen:

  • Einheiten, die den großen Darstellungsbereich darstellen, haben das Präfix lv. Die Einheiten sind lvw, lvh, lvi, lvb, lvmin und lvmax.
  • Einheiten, die den kleinen Darstellungsbereich darstellen, haben das Präfix sv. Die Einheiten sind svw, svh, svi, svb, svmin und svmax.

Die Größe dieser prozentualen Einheiten für den Darstellungsbereich ist fest (und daher stabil), sofern der Darstellungsbereich selbst nicht geändert wird.

Zwei Visualisierungen für mobile Browser, die nebeneinander platziert sind. Das eine hat ein Element der Größe 100svh und das andere 100lvh.
Zwei Visualisierungen für mobile Browser nebeneinander, die nebeneinander platziert wurden.
Eines hat eine Elementgröße von 100 svh und die andere 100 lvh.

Zusätzlich zu den großen und kleinen Darstellungsbereichen gibt es auch einen dynamischen Darstellungsbereich, der die UA-Benutzeroberfläche dynamisch berücksichtigt:

  • Wenn die dynamischen Symbolleisten maximiert werden, entspricht der dynamische Darstellungsbereich der Größe des kleinen Darstellungsbereichs.
  • Beim Zurückziehen der dynamischen Symbolleisten entspricht der dynamische Darstellungsbereich der Größe des großen Darstellungsbereichs.

Die zugehörigen Einheiten haben das Präfix dv: dvw, dvh, dvi, dvb, dvmin und dvmax. Ihre Größen sind zwischen den entsprechenden Werten für lv* und sv* festgelegt.

100dvh passt sich automatisch an den großen oder kleinen Darstellungsbereich an.
100dvh passt sich an den großen oder kleinen Darstellungsbereich an.

Diese Geräte werden in Chrome 108 ausgeliefert. Diese werden als Safari- und Firefox-Geräte angeboten, die bereits Unterstützung bieten.

Unterstützte Browser

  • 108
  • 108
  • 101
  • 15,4

Wichtige Hinweise

Bei Darstellungseinheiten gibt es einige Vorbehalte:

  • Keine der Einheiten für den Darstellungsbereich berücksichtigt die Größe der Bildlaufleisten. In Systemen mit aktivierten klassischen Bildlaufleisten ist ein Element mit der Größe 100vw daher etwas zu breit. Dies geschieht gemäß der Spezifikation.

  • Die Werte für den dynamischen Darstellungsbereich werden nicht bei 60 fps aktualisiert. In allen Browsern wird die Aktualisierung gedrosselt, wenn die UA-Benutzeroberfläche erweitert oder zurückgezogen wird. Einige Browser entspringen sogar je nach der verwendeten Geste (langsames Scrollen oder Wischen) vollständig.

  • Die Bildschirmtastatur (auch als Bildschirmtastatur bezeichnet) wird nicht als Teil der UA-UI betrachtet. Daher wird die Größe der Darstellungsbereich-Einheiten nicht beeinflusst. In Chrome können Sie festlegen, dass die Bildschirmtastatur sich auf die Einheiten für den Darstellungsbereich auswirkt.

Zusätzliche Ressourcen

Weitere Informationen zu Darstellungsbereichen und diesen Einheiten finden Sie in dieser Folge von HTTP 203. Darin teilt Bramus Jakob alles über die verschiedenen Darstellungsbereiche und erklärt, wie die genaue Größe dieser Einheiten bestimmt wird.

Zusätzliches Lesematerial:

Teil der Videoreihe „Neu interoperable“