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

On Sep 9, 2013, at 3:23 AM, Håkon Wium Lie <howcome@opera.com> wrote:

> Also sprach Brad Kemper:
> 
>>> If you want different sidenotes for left and right pages, you can use
>>> the @sidenote construct:
>>> 
>>> @page :left {
>>>   @sidenote {
>>>     border-radius: 0.2em 0 0 0.2em; 
>>> }}
>>> @page :right {
>>>   @sidenote {
>>>     border-radius: 0 0.4em 0.4em 0;
>>> }}
>> 
>> My main point is that you shouldn't have that power only for a side
>> note or footnote or element in a margin box. It should be just as
>> easy to selectively style any element within the main content area,
>> based on the page-selecting @rule.
> 
> My suggested code above was meant as practical suggestions -- it's
> specified, implemented and usable today -- as the PDF shows:
> 
>  http://people.opera.com/howcome/2013/tests/css-gcpm/sidenote-ah.pdf
> 
> I understand your wish for the future, though: to style a element
> based on which page it ends up on. What would your ideal syntax look
> like?

Too late for my ideal, which was putting selectors directly within @page, and using an inner @rule or something like body to style the box itself. At this point, @content would be OK, but bare curly braces would be better. Like this:

@page :right {
   background-color: black;
   margin-right:2in;
   {
       * { color: white; }       
       .next-page { background-color: red; float:right-top}
       img { float: right-middle; }
   }
   @right-top, @right-middle {
       border-bottom:1px solid gray;
       padding: 1em 0;
       {
           & > * { border-radius: 0 6px 6px 0; }
       }
   }
   @right-top: border-top: 1px solid gray;
}

@page :first {
   margin: 1in 2in 1in 1in;
   background-color:transparent;
   {
       * { color: black; }
       article { border-radius:6px; background-color:yellow; columns: 1; }
       h2 { font-size: 40px; }       
       p { font-size: 20px; }
   }
}


>> Also, your rule above means that _everything_ floated into a
>> sidenote gets a border-radius
> 
> That's not what the spec intends. Foonote and sidebar areas are styled
> as areas -- not as elements. 

Sorry, I was reading examples 28 and 35 too fast, and I mislead myself. So, it is more limiting than I thought without my syntax above.

Received on Monday, 9 September 2013 15:12:46 UTC