This article contains 3 images. You will find them at the very end of the article.

This article contains 880 words.

Respond 16: vw + vh === vnice - Craig Sharkie - Web Directions

Respond 16: vw + vh === vnice – Craig Sharkie

John Allsopp

1st May, 2017

@johnallsopp

A pretty strong theme emerged at our Respond 16 conference of reassessing what parts of CSS might be usable now that they have browser support (or don’t) and then how they might best be used (or not).

Craig Sharkie gave a short, sharp presentation on the state of play with regard to viewport units. In fact, a couple of other speakers referred to viewport units at Respond 16 and at subsequent events as well, but Craig gave us a detailed rundown.

Here’s our Wrap magazine summary.

vw + vh === vnice

Craig Sharkie, author & raconteur

Key points

As legacy browsers are replaced by more modern versions, viewport units provide a way to manage the proportional scaling of web typography.

Viewport units are length units representing viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

We know these units are “new” because we have had articles telling us about them just this year. And last year. And the year before … in fact, back to 2012. We have just under-utilised them.

vw equals 1/100th of the width of the viewport.

vh equals 1/100th of the height of the viewport.

vmin equals whichever of 1vw or 1vh is smaller.

vmax equals whichever of 1vw or 1vh is larger.

Browser support for viewport units is generally good but not all units are supported in all browsers. If you just

use vw and vh, support is 100%.

Takeaways

A digression: contextomy is the word for taking something out of context, and thereby changing its meaning. An example is saying “Great minds think alike” (when two people think of the same clever thing) but leaving off “And fools rarely differ” (which implies maybe it’s not because the two people were particularly clever). We do the same with browsers. We say “it doesn’t have full browser support” but we neglect to add that that doesn’t stop us from using techniques where there is support. Maybe this is why we fail to make use of the many measurement units we

have at our disposal.

Relative units can be used to smoothly increase font size, eg font-size: calc(1em + .25vw). This gives a smoothly scaling display ideal for responsive web design.

Viewport units can be used in the same way as em, rem and px to manage various page elements. Font resizing presents the strongest case for using viewport units, but experiment with cases such as having a child element react to viewport resizing while a parent element remains unaffected.

Viewport units can be used to ensure websites fit in the browser, eg making a square design element look right in a rectangular viewport.

Viewport units can be used create a thumbnail of a site by embedding the page as an iframe.

Caveats

In theory, viewport units will eventually render nothing when the screen reaches zero width or height. In reality things just get too big or small to be useful.

Of the browsers in current common use, the IE group has the least support for viewport units. IE8 has no support at all, while IE9 supports “vm” rather than “vmin”. IE10, IE11 and Edge do not support “vmax”.

Opera Mini does not support viewport units at all, and neither does Android 4.3, but viewport resizing on mobile devices is not very common, anyway.

vnice is not actually a real viewport unit – chalk that one up to poetic licence.

Resources

@twalve

slides

Great reading, every weekend.

We round up the best writing about the web and send it your way each Friday morning.

delivering year round learning for front end and full stack professionals

Learn more about us

Going to #wds18 has given me inspiration to attend more conferences. Meeting tech folks like myself and learning from each other is pretty amazing!

Hinesh Patel Ruby and React Developer

Each year we have 6 unique online conferences for front end developers, plus Remixed, a free event that brings together some of the highlights from the previous year.

The conference CSS deserves

Online, globallyApril 2022

Learn More

a conference on front end performance

Online, globallyMay 2022

Learn More

a conference all about JavaScript

Online, globallyJuly 2022

Learn More

a conference on progressive web apps and web platform

Online, globallyearly 2023

Learn More

accessibility engineering for front end developers

Online, globallyearly 2023

Learn More

privacy, security, identity for front end developers

Online, globallyearly 2023

Learn More

The best of 2022, remixed, and free!

Online, globally2023

Learn More