CSS: Neue Masseinheiten braucht das Land

Eine Heranführung an die CSS-Masseinheiten «vh» und «vw»

Kennen Sie Ihre Kleidergrösse? Ich persönlich habe so meine Mühe, mir diese Zahlen- und Buchstaben-Kombination zu merken, welche angibt, wie lang und wie breit die Jeans ist, die mir angeblich passen soll. Und sowieso ist dann bei italienischer Mode eher die Grösse +1 zu wählen und bei jener aus Asien +3 – wie soll man(n) da noch durchblicken?!

Meine Töchter scheinen da weniger Mühe zu haben. Eine meiner Töchter hat einmal sogar gemeint: «Ist doch kein Problem! Ich kaufe einfach immer jene Grösse, die mir passt!». So kann man es auch sehen.

Was das alles mit Masseneinheiten in der Webseiten-Gestaltungs-Sprache CSS zu tun hat, erfahren Sie im folgenden Blogbeitrag.

Erst einmal die Basics – kurze Repetition

Falls Sie am 21.08.2014 noch nicht zu den Leserinnen und Lesern meiner Blogbeiträge gehört haben, verlinke ich hier gern meinen Artikel zum Zusammenspiel von HTML und CSS. Auch wenn Sie fit im Umgang mit HTML und CSS sind, sollten Sie ihn kurz überfliegen. Einfach, damit die Dinge klar sind und wir vom gleichen sprechen… äh… also schreiben (ich) bzw. lesen (Sie).

Zusammengefasst: HTML definiert die einzelnen Elemente einer Webpage und CSS definiert, wie die einzelnen Elemente – jedes für sich und zueinander – aussehen sollen.

Bildschirm, Bildschirm an der Wand, wer hat die grösste Auflösung im ganzen Land – eine Zeitreise

Ich erinnere mich noch – es war vor der Jahrtausendwende – an den Tag, als ich einen neuen Bildschirm gekauft hatte und ich – endlich – die Auflösung von 640 × 480 nicht nur auf 800 × 600 Pixel, sondern auf satte 1024 × 768 Pixel umstellen konnte:

Mehr als diese drei Einstellungsmöglichkeiten gab es damals nicht.

Wenn ich heute in den tiefen Gefilden des Internet surfe, finde ich Online-Artikel wie diesen Beitrag aus dem Jahre 2012, die bereits damals deutlich mehr als die oben erwähnten drei Bildschirmauflösungen zeigen – alleine für Android-Geräte. Und auf meinem Büro-Schreibtisch steht ein Monster-Monitor mit einer Auflösung von 3840 × 1080 Pixeln.

Die Herausforderung für Webdesigner

Galt es für Webdesigner vor der Jahrtausendwende, die Entscheidung zu fällen, ob man sich auf 800 × 600 beschränkt oder es doch mutig wagt, ein Design für 1024 Pixel breite Bildschirme zu entwerfen, kann man heute beim besten Willen nicht mehr wissen, wie viele Pixel auf dem Client-System zur Verfügung stehen werden.

Wie man da noch «anständiges» Webdesign machen soll, war einigen der Urgesteine aus der Ära, in der HTML noch das COLOR-Attribut kannte, ein Rätsel. Wie beim Jeans-Kauf gab es anno dazumal nämlich entweder das eine oder das andere.

Bildschirmauflösung? Viewport!

Wie so manche Herausforderung wurde auch diese – mit mehr oder weniger «Opfern» – gelöst: Der sogenannte Viewport hat sich im Webdesign etabliert. Wie das mit dem Viewport genau funktioniert, braucht hier nicht (nochmals) erläutert zu werden. Das haben andere – z.B. in diesem Beitrag – schon gemacht. Für unsere Heranführung reicht es zu definieren, dass es seit der Einführung des Viewports nicht mehr auf die Bildschirm-Grösse ankommt.*

Die zur Verfügung stehende Menge an Pixeln – sowohl in der Höhe wie auch in der Breite – ist nicht mehr eine fixe, sondern eine fliessende, veränderbare, unvorhersagbare und somit von Client zu Client sehr variable Zahl.

«Kauf doch einfach die Grösse, die passt!»: vh & vw

Mit der Einführung des Viewports – beziehungsweise nach der für neue «Standards» üblichen Latenzzeit – wurden folgerichtig bzw. zwangsweise auch neue Masseinheiten in CSS eingeführt:

• vh: Viewport-Height
• vw: Viewport-Width

Mit diesen Masseinheiten können Webdesigner nun Höhen- und Breitenangaben für Elemente in Prozent des Viewports definieren. Gibt man einem Element also beispielsweise die Breite «50vw» nimmt es 50% der Viewport-Breite ein.

Ich werde beim nächsten Jeans-Kauf mal versuchen ein Paar in der Länge «100vh» zu finden.

Was es zu beachten gilt!

Drei Dinge, bevor Sie jetzt wie wild all Ihre CSS-Anweisungen umschreiben oder einen CSS-Kurs besuchen, um mehr über den Viewport zu erfahren:

1. Eine Faustregel lautet: Die Bildschirmauflösung ist grösser als die Desktopgrösse ist grösser als die Fenstergrösse des Browsers ist grösser als der Viewport!
2. Denken Sie an das Nicht-Ganze-Pixel-Phänomen wie ich es z.B. in in einem anderen Blogbeitrag beschrieben habe. 10% von 96 Pixeln und 10% von 100 Pixeln sehen aufgrund dieses Phänomens nämlich verblüffend «ähnlich» aus.
3. Trauen Sie keinem Blogbeitrag über vh und vw ohne auch diese Website zu konsultieren 😉

Ich wünsche Ihnen viel Spass beim Erkunden der Viewport-Welten von CSS.

* warum meine Freundin ausgerechnet beim Lesen dieses Satzes geschmunzelt hat, ist mir bis heute unverständlich! Vielleicht konnte Sie ihn ja auf meinem 3840 × 1080-Monster-Screen nicht wirklich gut lesen.