Re: [css3-values] vmax, please!

Hi Brad,

Wow. Great. Thanks for letting me know.

Here's a very basic use case: A complex graphic that for layout reasons needs to be kept square. If you set the container's height and width to both be 100 vmin, the entire graphic will always initially fit on screen, but the user will get blank space ("letter boxing" essentially) on the long viewport dimension. Fine, okay.

But what if the developer wants to use all that available space, especially on a reduced mobile viewport, and instead force scrolling on the short viewport dimension? Easy: set both height and width to 100 vmax. The square is still preserved, but it's larger, and the user gets scrolling in one and only one direction. On a horizontally oriented "landscape" viewport (typically desktop) this would mean a vertical scrollbar. On a vertically oriented "portrait" viewport (typically mobile) this would mean a horizontal scrollbar. Make sense?

One of the beauties of this layout approach is that it avoids the situation of both vertical and horizontal scrolling being available, which sows confusion for the user who, after opening a page, has to hunt around in two dimensions simultaneously.

My feeling (which I've heard echoed around the web lately) is that horizontal scrolling, out of fashion for so long, is currently underutilized. Especially in the mobile space, the dominant pattern is "Force everything into one long tall column with max-width declarations". This has a great deal to do with the nature of inline text, of course, but it's also a function of the whole float model.

Vmax is a good tool in the kit for visually oriented materials that want to stay as large as possible, and are open to a horizontal scrollbar on portrait-oriented devices.

I hope this is clear.

Best,
Ben


On Jun 27, 2012, at 9:48 AM, Brad Kemper wrote:

> Thanks for bringing this up. The Working Group has agreed to add vmax.
> 
> That was pretty easy, huh? 
> 
> We agreed it made sense to have vmax if we have vmin, that there are likely use cases, and no real reason not to have vmax. But I think we would still be interested in what the use cases are that you know of, if you'd care to share.
> 
> On May 25, 2012, at 7:04 AM, Benjamin Lord wrote:
> 
>> Hi,
>> 
>> As a developer, I'd like to underscore the usefulness of a vmax unit, something notably missing from the spec. I've been playing with experimental new responsive patterns in Chrome, and there are occasional use cases having to do with responsive graphics, and adapting to both horizontal and vertical viewports.
>> 
>> I see that Brad K suggested it at the 2011-10-12 meeting, but the idea seems to have been promptly forgotten.
>> 
>> I understand that these comparisons are difficult for programmers to implement. But since Chrome has already (mostly) nailed vmin, isn't vmax a similar comparison?
>> 
>> Thanks for your time,
>> Ben
>> 
>> 
>> 
>

Received on Monday, 2 July 2012 11:35:19 UTC