Sizing with CSS3's vw and vh units
CSS3 introduces a few new units. (Oh wait, I've said that before.) So, you've heard about px, pt, em, and the fancy new rem. Let's look at a couple more: vw and vh.
Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. Normally, we'd have to use JavaScript to do this. Check the size of the viewport and then resize any elements on the page accordingly. If the user resizes the browser then the script runs again to resize the elements on the page.
With vw/vh, we can size elements to be relative to the size of the viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th the width of the viewport. To make an element the full width of the viewport, for example, you'd set it to width:100vw.
Putting it to good use
Lightboxes seem like a great candidate for using vw and vh units, since the lightbox is normally positioned in relation to the viewport. For elements positioned in relation to the viewport, however, I find using fixed positioning with top, bottom, left, and right values to be an easier approach—completely forgoing the need to specify height and width at all.
A good use case for these new units would be for content that sits within a normal document flow. For example, scrolling this page, I could include a number of screenshots. For those screenshots, I don't want them to exceed the height of the viewport. In this case, I can set a maximum height on my images.
img { max-height:95vh; }In this case, I set the height to 95 to give the element a little bit of breathing room while on the page.
Browser Support
With rem, we have support across almost all major browsers including IE9. With vw and vh, however, we still have to wait awhile. Internet Explorer 9 is the only browser out right now that supports these units.
Conversation
This is really amazing! No more "onResize" scripts when developing for modern browsers (extensions, apps, etc.)
Thanks!
You may want to change the title to vW and vh units.
Nice to see another css method taking over for javascript.
Any word on if these units will work with scale() for animations and transitions?
@Alex H: Aw, crap. Fixed the title. But I pooched the url.
@Stephanie Hobson: The units should have no impact on transforms (with animations or transitions). Scale in particular takes a unit-less value and doesn't impact document flow.
Hi there!
Thanks for the article. I have a question though: you state that .
I can't understand what the difference is here with percentages. I played around with it in a fiddle but they seemed to work quite the same... could you explain this?
Cheers!
Jelmer
@Jelmer As I understand it VW and VH are always relative to the viewport, whereas percentages are relative to their first positioned ancestor (which is sometimes the viewport but not always)
@Jelmer: As far as I can tell the difference between percent and vw/hw is that percent values are relative to container, whereas vw/hw are relative to viewport, so they're like absolute and relative positioning.
@martinansty and @pies: Ah, thanks! Indeed it seems that's what's going on here. Now I actually see the benefit of using vw and vh, thanks.
And there is vm, too. It applies to the smaller value of width and high.
Since we dropped IE 6 support, I never use Javascript to resize containers when I want them to have dimensions relative to viewport.
What I do is to position them absolutely (or fixed, depending), and give values to all offset properties, e.g. left: 20px; top: 20px; right: 15px; bottom: 35px; This way the container is always "resized" when the user scales his/her viewport.
@hristo Jonathan mentions that technique in the fourth paragraph of this article.
@jonathan thanks for another great article about new CSS3 units
For the nerdy, here's the Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=503720
Way you don't mention vm in the article?
http://www.w3.org/TR/css3-values/#vm
@Silent Imp: I've saving it for the next post! I kid. I should've but didn't think to.
The VM unit!
So, you know about vh and vw, what is this VM unit that Silent Imp refers to? Why, it's the minimum of the two values. If the viewport is 800px by 600px, then 100vm would be equivalent to 600px.
Can someone explain to me why is this better than the '%' unit?
@Varamenos: How else would you size an element that is within the bounds of a parent element to be the size relative to the viewport?
How do you set the height or width of #a to be relative to the viewport? You can't with %. That's where the vw/vh/vm units come in.
@Jonathan Snook Wait, wouldn't that just be an issue of division? E.g. whatever percent you want it to be of the viewport, you'd have to multiply outer containers to make it work? I think I get the use case, I've run up against the problem with responsive text sizes, but it's weird.
@Roy, It's only an issue of division if you can determine that the percentage of the parent is indeed a percentage of the viewport. It may or may not be. What vw/vh does is remove the dependency on any parent and allows sizing based on the viewport size.
Another use of vw/vh could be to size fonts to be larger on bigger viewports and smaller on tinier viewports.
I love the fact that hell froze over and IE now supports a few CSS features the other major browsers don't :P
@Aniel - This is probably Microsoft's plan to get IE back in vogue with developers. "Look, we support more Standards than the other guys, we love you, come back to us!" Sorry Microsoft, but in order to get me back as a developer, you have to be able to beat Firebug, have better Standards compliance, AND outperform everyone else (startup and page loading times for IE7 and later are abysmal).
Hello , I do imagine that is a superb web site. I stumbled on it on Yahoo , i'll arrive again as soon as yet again. Funds and liberty will be the finest method to alter, could you be prosperous and aid others.
Designers need to take this more seriously as a creative medium.
Autson offers you its unique high quality, innovative web designing and web development solutions and Internet marketing services with a strong determination of customer service. We deliver excellent services for small and large businesses, individuals and corporate. We have marvelous strategic planning and analysis which will meet with your requirements.
marvelous post !!
you have done well, you have done a tremendous job which shows your esteemed expertise on word press, keep it up . we are also developing and designing websites, just because we like to give our expertise in web designing and developing. We are in the habit of developing and implementing your suggestions. Autson works with innovative ideas to bring in new variations.
We are here www.autson.com
I rkecon you are quite dead on with that.
It's funny, having read about this in the W3C spec (http://www.w3.org/TR/css3-values/#viewport-relative-lengths) this site was the only other place I could find discussing it. It seems particularly relevant to responsive designs but alas until Webkit and Mozilla join the party we are stuck with px > em conversions...
When you say, "support across almost all major browsers" can you actually list the browsers by version that you are referring to? The term "major browsers" is a shifting term that depends upon opinion and the date the article was written. Specifying the actual versions means that the information is useful for all time, and this is especially important as browser support is the major stumbling block to adoption of new techniques.
@Gabriel: I've listed browser support for REM in a separate post. And I've listed vw/vh support in this article as being IE9 only. However, that is now out of date as Safari 6 and Chrome now support it as well. I recommend caniuse for detailed info on browser support.
I just read your article on Sizing with CSS3's vw and vh units - Snook.ca and want to thank you for it.
Very handy, I've been looking for this for a while. It seems the perfect way to control background gradients and images.