CSS3 Viewport Units
Größenangaben in Relation zum Viewport nutzen
Beitrag vom
Mit prozentualen Angaben und Media Queries ist es möglich, Websites schön auf allen Geräten skalieren zu lassen. Die relativen Werte stehen dabei aber immer in Bezug zum Elternelement. Was bei Breitenangaben normalerweise schön funktioniert, wird bei Höhenangaben in einem responsiven Umfeld schon mehr zu einem Problem. Prominentes Beispiel sind Full-Screen Abschnitte auf einer Website – Hier am Beispiel der Kombüse Mannheim:
Die Kombüse in verschiedenen Größen
Der Javascript Weg
Die alte Schule sieht vor, dass wir da mit Javascript ran gehen. Wir messen die Maße des Viewports aus und wenden diese auf die Elemente an, die bitteschön den ganzen Viewport in Beschlag nehmen sollen. Das Ganze tun wir, sobald die Seite geladen wird und wenn wir feststellen, dass sich die Größe oder Orientierung des Viewports ändert.
Durch Javascript wird die Höhe festgelegt.Gerade, wenn wir da noch auf verschiedenen Orientierungen und Größen anders reagieren wollen (z.B. Smartphone im Hochformat braucht nur die halbe Höhe) dann wächst der If-Else / Switch Baum schnell ins Unendliche und wird unübersichtlich.
Hallo Viewport Units
Hier kommen die neuen CSS Einheiten für Größen in Relation zum Viewport ins Spiel. Statt via Javascript können wir das ganze jetzt wunderbar via CSS ansteuern. Und zwar mit den neuen Einheiten für Größenangaben vw, vh, vmin & vmax.
vw und vh
vw (viewport width) und vh (viewport height) sind relative Angaben zur Breite bzw. Höhe des Viewports und können numerische Werte zwischen 0 und Unendlich annehmen. Im Prinzip funktioniert das wie prozentuale Angaben. Nur ist der Bezug hier nicht mehr auf dem Elternelement, sondern eben auf dem Viewport. Möchte man eine Full Screen Section erzeugen, kann man ganz einfach height: 100vh; definieren. Sprich: Die Höhe ist gleich 100% der Höhe des Viewports. Analog dazu funktioniert vw: 100vw entsprechen 100% Breite des Viewports.
vmin & vmax
Ziemlich ähnlich funktionieren auch vmin und vmax: Die beiden Werte sind nicht fest an Höhe und Breite des Viewports gebunden, sondern orientieren sich an der kleineren bzw größeren Dimension des Selbigen. Ein Beispiel:
Wir haben ein Smartphone und halten es hochkant, also in Portrait-Orientierung. Der Viewport ist jetzt höher als breit. Vmin bezieht sich also auf die Breite des Smartphones, weil diese eben der kleinere Wert ist. Ein height: 50vmin; auf einem Div würde hier die halbe Breite des Viewports messen und als Höhe des Elements festlegen.
height: 50vmax; macht quasi genau das Gegenteil. Es nimmt sich die größere Dimension des Viewports (bei unserem Handy also die Höhe) und berechnet prozentual dazu die Höhe des Elements. In diesem Fall 50%;
Wo man kann man das anwenden?
Prinzipiell greifen die Werte überall da, wo man eine Längenangabe verwenden kann. Die üblichen Verdächtigen wie width, height, padding, border & margin klappen sowieso. Sogar innerhalb der calc()-Funktion kannst du Viewport Units arbeiten.
Schrift
Du kannst deiner Font Size in Abhängigkeit des Viewports definieren. Möchtest du, dass die Schrift 25% deiner Viewport-Höhe einnimmt? Kein Problem! Schreibe font-size: 25vh; in dein CSS und die Sache ist erledigt. Oder probiere doch mal die Line-Height.
Positionierung
Du kannst genauso gut die Werte für top, bottom, left & right mit viewport units bestimmen. Wie wäre es denn zum Beispiel mit einem Flyout-Menü, dass sich an die Größe des Fensters anpasst und sich im Windows-Phone Kachel-Stil über die Seite legt?!
Alles Andere
Ob Box-Shadows über den ganzen Bildschirm oder ein Border-Radius in Abhängigkeit der Breite: Es ist einiges möglich. Nur ob und in wiefern das Ganze produktiv noch Sinn macht ist eine andere Frage.
Unterstützung
Mit den Viewport Units wurde wohl ein Nagel auf dem Kopf getroffen, so schnell wie sie implementiert wurden. Es wird nämlich schon von fast allen gängigen Browsern unterstützt. Der IE ab Version 10 und Edge unterstützen zumindest schon mal vh und vw. IOS ist in Version 7 noch buggy. Android versteht’s ab Version 4.4, Firefox und Webkit Desktop Browser liefern volle Unterstützung. Aktuelle Details zum Stand der Unterstützung gibt es hier.
Bugfixing und Poyfill
Will man ältere Browser mit nehmen, kann man nach wie vor via Javascript die Höhe setzen. Es gibt allerdings auch schon vielversprechende Buggyfills, die gezielt die Problemchen der einzelnen Browser ansteuern. Zum Beispiel der von Rodney Rehm.
Tags: CSS3, Gestaltung, Layout