Re: [css3-page] Styling elements differently based on whether they appear on a left or right page

On Jul 28, 2013, at 12:45 PM, Håkon Wium Lie <howcome@opera.com> wrote:

> Also sprach Brad Kemper:
> 
>>>>> http://www.w3.org/TR/css3-gcpm/#floating-inside-and-outside-pages
>>>> 
>>>> That's not bad for floats, but doesn't help much if you want to use
>>>> grid or table-* or something else
>>> 
>>> The problem at hand is how to best to sidenotes in CSS (as opposed to
>>> how to do sidenotes with feature x). Here's my proposal:
>>> 
>>> div.sidebar { float: outside }
>> 
>> My point is that sidebars are commonly needed as a page layout
>> feature, and floats are not great for doing page layout.
> 
> Experimentation had led me to a different conclusion. Here's are som
> float-based examples for paged layouts:
> 
>  http://people.opera.com/howcome/2013/02-reader/
> 
> What would be your preferred ways of coding, say, the first of these?

I've nothing against doing that sort of layout like that, where you have evenly sized and spaced columns and everything is to fit within even multiples of those columns. That is not the same as what I've seen as typical sidebars though, such as the so called "holy grail" layout. Dealing with wrapper divs, clearing floats, large negative side margin hacks, huge padding-bottom/negative margin-bottom hacks, and so on to get sidebars that start and stops where you want it is generally not fun.[1] it's the sort of thing where grid or flex box or table layout works better. And if using grid or flex box or table layout, I still want to be able to vary the side (and alignment, and color, and many other things) based on the page it's on. And not just on left or right page either, but also based on named pages and :first pages too.


1] http://alistapart.com/article/holygrail