New CSS units

A new set of 3 unit for measuring/sizing elements in CSS is gaining support: vh, vw, and vmin. These are values that refer to the size of the user’s viewport (browser window size).

vh - percentage of viewport height
vw - percentage of viewport width
vmin - percentage of which ever is smallest, vh or vw

The way it works is this: 1 unit = 1% of the user’s viewport. So, 100vh would take up the entire height of the user’s browser, and 100vw would take up the entire width of the user’s browser.

This means of measurement opens up a lot of possible & intuitive ways to create truly dynamic layouts, the size of which would be based on the user’s screen size. Designers can now relate the size of elements to the size of the user’s screen (something I have wanted on multiple occasions). Being able to directly reference the size of a user’s viewport in CSS might ease the process of setting up multicolumn designs and more complex navigation systems that scale well to smaller form factors.

Support is pretty scarce right now. So far, support is only promised in Chrome 20, Safari 5.2 (Beta 3) [Version 5.2 (7536.6.1)], and IE10. Chrome 19 is in still in beta right now, as is IE10. The beta tracks of Opera and Firefox do not have support for vw, vh, or vmin yet.

For anyone on those browsers you can check out this link to view.

Here is a video example:

You can also read more on it’s typographic implications and to learn more over on css-tricks.com