Als je dacht dat responsive web niet spannender kon worden dan dat het al is, moet ik je teleur stellen. Onlangs is er een nieuwe reeks van dynamische CSS eenheden voorgesteld voor het ‘resizen’ van elementen. Bovendien hebben deze nog goede browser support ook!

De nieuwe eenheden: vw, vh en vmin zullen je heel wat werk besparen eens ze volledig ondersteund worden door de grotere browsers. Ze zullen er onder andere voor zorgen dat je niet meer hoeft bezig te zijn met het omzetten van px naar em of percentages, maar ze zullen ook een efficiente oplossing bieden voor ontwerpers en ontwikkelaars die streven naar apparaat-onafhankelijk ontwerpen.

Als je al vertrouwd bent met de font-relatieve eenheden zoals em and rem, dan zullen deze nieuwe vierport-relatieve eenheden onmisbaar zijn bij het ontwikkelen van dynamische website layouts.

Hoe werk vw, vh en vmin?

Het gebruik ervan ziet er ingewikkeld uit maar dat is het helemaal niet. Als je ze nog nooit gebruikt hebt, denk dan dat elke value gelijk is aan 1% of 1/100 van de viewport. Dus als de browser viewport resized zullen de waarden van vw, vh of vmin veranderen om zo de specifieke elementen relatief te resizen t.o.v. de breedte en hoogte van de viewport (of de kleinste van de twee waarden). We kunnen vandaag natuurlijk hetzelfde effect bekomen als we werken met percentagen of em eenheden. Maar wat de nieuwe eenheden zo speciaal maakt, is dat ze niet afhankelijk zijn van hun parent element en dat ze puur gebaseerd zijn op de viewport.

Het vw eenheid
De vw eenheid (viewport width) is gelijk aan 1/100ste of 1% van de viewport breedte (width). In het voorbeeld hieronder: als de viewport width 1000px is, dan zal de font size van de h1 gelijk zijn aan 40px;

h1 {
font-size: 4vw;
}

Een kleine berekening om dit uit te leggen:

4×1000/100 = 40 (px)

Niet zo moeilijk, toch?

Het vh eenheid
Hetzelfde als vw, alleen in de hoogte dan. De vh-eenheid (viewport height) is gelijk aan 1/100ste of 1% van de hoogte van de viewport. In onderstaand voorbeeld: als de viewport gelijk is aan 700px, de max-height van de afbeelding zal 175px zijn (25×700/100 = 175).

img  {
max-height: 25vh;
}

De vmin eenheid
Deze eenheid is 1/100ste of 1% van de minimum waarde tussen de hoogte en de breedte van de viewport. Dus: als de viewport 1000px op 700px is, dan zal 100vmin gelijk zijn aan 700px.

We kunnen vh, vw en vmin voor bijna alles gebruiken, vooral voor teskt, hoofdingen en layout. Ze kunnen helpen om je tekst leesbaar te houden als je werkt met multi-column layouts. Een breedte en een hoogte kunnen worden vastgelegt om ervoor te zorgen dat de tekst niet onder de viewport height komt. Zo hoeven de gebruikers niet te scrollen als ze aan het lezen zijn.

section {
height: 60vh;
width: 60vw;
column-width: 20rem;
column-gap: 2.4rem;
overflow: scroll;
}

Met de overflow:scroll; zullen de columns horizontaal scrollen. Mocht het je nog niet te binnen gevallen zijn, dit alles kan men bereiken zonder beroep te moeten doen op media queries om de elementen te resizen of JavaScript om de viewport size te berekenen.Browser support

Momenteel zijn deze eenheden beschikbaar in Chrome20+, Safari 6 en IE9. Als je de browser compability wil volgen neem je best een kijkje op http://caniuse.com/viewport-units. Voor de browsers dat nog niet mee zijn met hun tijd kunnen (moeten) we altijd een fallback voorzien:

img {
max-height: 175px;
max-height: 25vh;
}

Dus, het enige wat je nu nog hoeft te doen is je favoriete coding programma openen. Chrome starten en beginnen expirementeren! Het zal niet lang duren of je bent een fan van de nieuwe css3 eenheden.