Web Directions Year round learning for product, design and engineering professionals

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