Re: [css3-box] padding: auto

Wouldn’t that still require two elements?

What I like about this idea is that it removes the special handling of <body> for backgrounds from the prose, and just converts it to a line in the UA stylesheet. However, regarding the use case I described, I really think we can do better.

Lea Verou (http://lea.verou.me | @LeaVerou)

On Jul 16, 2012, at 16:15, Tab Atkins Jr. wrote:

> On Mon, Jul 16, 2012 at 4:07 PM, Lea Verou <leaverou@gmail.com> wrote:
>> A common visual design pattern that has emerged in the past few years is the
>> content area having a fixed width, with the background extending to cover
>> the entire viewport width. Here is a quick list of websites doing this:
>> http://lesscss.org/
>> http://www.opera.com/
>> http://www.mozilla.org/
>> http://www.kaleidoscopeapp.com/
>> http://daneden.me/type/
>> http://www.alfredapp.com/
>> http://grabaperch.com/
>> http://twostepmedia.co.uk/jsquery/
>> http://whiteboard.is/
>> 
>> For given viewport dimensions, this could be done by adjusting the left &
>> right padding to be equal to (viewport width - width) / 2. However,
>> viewports are not fixed, and therefore authors almost always resort to using
>> a wrapper element for the content, with fixed dimensions and margin: auto,
>> and assign the background to its parent element. calc() enables this to be
>> expressed in pure CSS with something along the lines of:
>> width: 20em;
>> padding: calc(50vw - 20em / 2);
>> 
>> This is certainly an improvement, but still suboptimal. Not only it’s not
>> very readable, but the width needs to be duplicated or assigned to a
>> variable to keep the code DRY. Given that this is not an isolated case, but
>> an incredibly common pattern, I believe it should be addressed by something
>> more straightforward.
>> 
>> Basically, what’s needed is an `auto` value for padding, that makes it
>> behave as `auto` does for margin. In the latest ED there *is* a new `auto`
>> value allowed for the padding properties [1], but the way it’s supposed to
>> work is not explained anywhere.
>> 
>> [1]: http://dev.w3.org/csswg/css3-box/#the-padding-properties
> 
> An alternative way to do this would be to have a way to opt-in to
> <body>'s special handling, where its background gets hoisted to the
> canvas.  That's how you achieve this effect when you're not varying
> the background within the page.
> 
> ~TJ
>

Received on Monday, 16 July 2012 23:29:35 UTC