- From: Ojan Vafai <ojan@chromium.org>
- Date: Tue, 17 Jul 2012 08:45:13 -0700
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: Lea Verou <leaverou@gmail.com>, www-style list <www-style@w3.org>
- Message-ID: <CANMdWTsSyPAqZ1Br=97eHt5jzSgEEf4UxHWgFbUJeEDcBF-CTQ@mail.gmail.com>
On Mon, Jul 16, 2012 at 4:15 PM, Tab Atkins Jr. <jackalmage@gmail.com>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. > Doesn't justify-content:center achieve the desired behavior just fine? > > ~TJ > >
Received on Tuesday, 17 July 2012 15:46:08 UTC