Re: New ::first-page pseudo-element

Michael Day wrote:

 > 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.
 > 
 > To achieve this we have implemented a new ::first-page pseudo-element, 
 > similar to the existing ::first-line pseudo-element, that can be used to 
 > adjust a subset of CSS properties for an element on the first page that 
 > it appears. 

This seems like a natural new member in the family of pseudo-elements. 

 > For example:
 > 
 >      div.chapter { columns: 2 }
 >      div.chapter::first-page { columns: 1 }
 > 
 > Here is an example HTML and PDF file showing the layout:
 > 
 >      http://www.princexml.com/samples/firstpage/firstpage.pdf
 >      http://www.princexml.com/samples/firstpage/firstpage.html

Looks good to me, both the code and the output. I've seen the style in
some academic papers, and it's common in magazine layouts to have
different styles on the first page of an article.

 > This solution solves the columns issue very neatly. It could also easily 
 > be extended to support all of the block-level non-inherited properties, 
 > such as the background/border/margin/padding properties.

Hmm, I wonder how to best express this.
background/border/margin/padding apply to (pretty much) all elements.
So does 'display', but I guess you don't want 'display' to apply?
column-span?

 > Supporting inherited properties would require some extra effort, similar 
 > to that required by ::first-line, as the properties would need to be 
 > correctly inherited by the children of the block. This would allow 
 > changing the font style or color on the first page.

Much like regions do.

How about saying, akin to [1], this:

  The following properties apply to :first-page pseudo-elements:
  column properties, background properties, margin properties, border
  properties, and padding properties. UAs may apply other properties
  as well.

[1] http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo

 > All in all, this new pseudo-element is straightforward to implement and 
 > solves a common layout requirement, so I would like to propose adding it 
 > to CSS3, eg. to the Generated Content for Paged Media specification.

Looks like a good fit. I'll add it in time for TPAC discussions.

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Tuesday, 25 October 2011 13:59:06 UTC