Re: [css3-values] vmax, please!

On Wed, Jun 27, 2012 at 1:13 PM, Benjamin Lord <ben@abmcd.com> wrote:
> 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.

Good, that matches what we thought the use-case might be - vmin lets
you size things in a way similar to background-size:contain, but vmax
lets you do 'cover' instead, which is useful.

Thanks, Benjamin!

~TJ

Received on Monday, 2 July 2012 17:30:35 UTC