W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: New ::first-page pseudo-element

From: Håkon Wium Lie <howcome@opera.com>
Date: Sun, 30 Oct 2011 22:53:14 +0100
Message-ID: <20141.51018.399058.180466@gargle.gargle.HOWL>
To: David Hyatt <hyatt@apple.com>
Cc: Michael Day <mikeday@yeslogic.com>, "www-style@w3.org" <www-style@w3.org>
Also sprach David Hyatt:

 > >> We've had user requests for the ability to switch from one column layout 
 > >> on the first page, to two column layout on the second and subsequent pages.

 > >> For example:
 > >> 
 > >>     div.chapter { columns: 2 }
 > >>     div.chapter::first-page { columns: 1 }
 > 
 > Why pseudo-elements? Isn't this more like a pseudo-class?

To me, it's more like a pseudo-element because we select part of a
strucutural element, not the whole element. This is akin to what
:first-line does. Pseudo-classes, however, select the whole element.

 > The boxes for pages and columns are already generated, so in my
 > mind it's more like you're matching an existing object than
 > creating a new one.

True, no new boxes are created. But that's the same for first-line --
it doesn't create any new line boxes.

 > I actually really like the region styling syntax as a way of
 > styling objects differently inside pages, columns or regions. In
 > WebKit I'm wanting to just re-implement pages and columns as
 > special cases of regions, so that everything is just a region.
 > 
 > So the above example could be more like:
 > 
 > @region :nth-page(1)
 > {
 > 	div.chapter { columns: 2 }
 > }

So, we have:

(a)  @region :nth-page(1) { div.chapter { columns: 2 } }
(b)  div.chapter::first-page { columns: 1 }

Or, perhaps:

(a)  @region :nth-page(1) { div.chapter { columns: 2 } }
(b)  div.chapter::page(1) { columns: 1 }

It seems they both have the same information in them. There may be a
difference in inheritance -- in (a) you cannot perform inheritance
before layout as you don't knoe which page div.chapter will turn up on
until you've don the layout. 

 > Similarly you could have an nth-column pseudo-class as well.
 > 
 > @region :nth-column(3)
 > {
 > 	div.chapter { background-color: blue; color: white }
 > }

which would be:

   div.chapter:column(3) { background-color: blue; color: white }

To select all columns on page 1:

   div.chapter:columns-page(1)

And, to select the first column on page 2:

   div.chapter:column(1):page(2)

 > I just really want to see us have a coherent picture for regions, multi-column and printing.

Indeed.

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Sunday, 30 October 2011 21:54:01 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT