Wir haben Viewport-Einheiten (z. B. vw, vh, vmin, vmax), und sie sind meistens ziemlich gut. Es ist cool, immer eine Einheit zur Verfügung zu haben, die sich auf den gesamten Bildschirm bezieht. Aber wenn man Leute fragt, was sie in CSS gerne verbessert hätten, stehen Viewport-Einheiten immer auf der Liste. Das Problem ist, dass Leute sie verwenden, um Dinge wie die Positionierung wichtiger Schaltflächen am unteren Bildschirmrand auf Mobilgeräten zu realisieren. Wenn man so etwas falsch macht, kann das 8 Millionen Dollar kosten.
Was ist “falsch”? Nun, die Annahme, dass 100vh der sichtbare/nutzbare Bereich im Viewport ist. Was? Ist das nicht der Sinn dieser Einheiten? Es gibt Tricks wie diesen und diesen, aber deshalb sind die Leute unzufrieden. Nichts davon ist intuitiv, und riesige Fehler sind nur allzu häufig. Auch wenn Safari 15 dies ein wenig besser machen wird, würde ich sagen, dass es immer noch nicht besonders intuitiv ist, wie man damit umgehen muss.
Bramus Van Damme behandelt, dass die Spezifikation nun einige neue Werte enthält
- Der “Große Viewport”:
lvh/lvw/lvmin/lvmax - Der “Kleine Viewport”:
svh/svw/svmin/svmax Der “Baby Bear Viewport”- Der “Dynamische Viewport”:
dvh/dvw/dvmin/dvmax
Mir scheinen die dynamischen am nützlichsten zu sein, da sie intuitiv sein werden: die Einheiten, die den aktuell nutzbaren Raum darstellen, sei er groß oder klein.
Der dynamische Viewport ist der Viewport, der mit *dynamischer Berücksichtigung von UA-Schnittstellenelementen* dimensioniert ist. Er passt sich automatisch an, wenn UA-Schnittstellenelemente angezeigt oder nicht angezeigt werden: Der Wert liegt zwischen den Grenzen von
Bramus Van Damme, „The Large, Small, and Dynamic Viewports“100vh(Maximum) und100svh(Minimum).
