You may want to change the title to vW and vh units.
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.
Thanks for the article. I have a question though: you state 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.
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
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?
@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.
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?
@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 - www.shoppingpr.com 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.
Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure and I like whisky.
I wrote SMACSS. I tweet. Want to learn more?
© Jonathan Snook