Re: [css3-regions] Changed @region rule to ::region() pseudo-element

On Tuesday 14 May 2013 02:55:08 Alan Stearns wrote:

> Following the discussion in the earlier thread [1] about the
> similarities between region styling and the ::distributed()
> pseudo-element, I have changed the @region rule to a ::region()
> functional pseudo-element. Now if you want to use region styling to
> set the color of a fragment of an element with 'class=bar' that
> displays inside a CSS Region with 'id=foo' you can use:

Note that the region itself is a pseudo-element, so if we want to put 
something after it, we'll have to change the rules in the selectors 
specification. E.g., the following are currently not allowed:

    ::column(2)::region(P)
    ::slot(c)::region(H2)
    ::fragment(4)::region(OL)

The model behind this syntax is also a bit difficult to explain. We're 
trying to style the part of an element P that falls in the second 
column. We already have 'P::first-line' to select the part of the P that 
is on the first line, so 'P::region(column(2))' would be more logical to 
select the part of the P that is in the second column.

Here are a few alternatives I have tried (see 
http://dev.w3.org/csswg/css3-layout/#select-after-pseudo)


1) If there is only one way to make regions, the names of the regions 
can be used directly. E.g., if we only make regions with templates, then 
you could have a pseudo-element that refers to the part of an element P 
that falls in slot c of the template as follows:

    P::region(c)

The disadvantage is that this looks very similar to

    DIV::slot(c)

which is used to style the region itself.


2) To avoid that similarity and to allow for more ways to make regions, 
we can make the argument a bit more verbose:

    P::region(column(2))
    P::region(slot(c))

This might be easier than the previous solution, but the extra nesting 
isn't nice either. Maybe without the parentheses it is easier to 
understand:

    P::region(column 2)
    P::region(slot c)

The name "region" isn't quite right either, because it is the term we 
use for the whole region (the slot, the column), not for the fragment of 
an element that flows into that region. So maybe:

    P::part(column 2)
or
    P::inside(slot c)
or
    P::overlap(slot c)

This even works for the existing pseudo-elements:

    EM::overlaps(first-line)


3) If we abandoned the rule that pseudo-elements are always the last 
component in a selector, we could put element names after them directly:

    ::slot(c) P
    ::column(2) > P
    ::column(3) + P   /* well-formed but never matches */

The first two could be made to mean something, namely any P or part of a 
P that is inside the given region.

The disadvantage is that this suggests that the style inheritance also 
follows this path, which is not the case.


4) The @region rule for comparison:

    @region ::slot(c) {
      P {...}
    }

A disadvantage is that the selectors have unexpectedly low specificity. 
E.g., with syntax 2,

    P::region(column 2) {color: blue}   /* specificity = 2 */
    P {color: red }                     /* specificity = 1 */

any P inside the 2nd column will be blue, but it will be red with the 
@region rule:

    @region ::column(2) { P {color: blue }}  /* specificity = 1 */
    P {color: red }                          /* specificity = 1 */


5) Another possibility, suggested by David Baron in css3-overflow, is to 
not try to invent a syntax at all, but change the inheritance rules a 
bit and limit ourselves to what can be done with that.

If we have a document tree

    DIV
    +-- P
        +-- SPAN

and the DIV is divided into two regions a and b that form a single flow, 
e.g.:

    DIV {grid: "a b"; chains: a b}

(or similar with 'columns: 2' or 'overflow: fragments') and the SPAN 
happens to end up in region b, then the SPAN inherits not along the tree 
shown above but along this tree instead:

    DIV
    +-- slot(a)
    |   +-- P [first part]
    |
    +-- slot(b)
        +-- P [second part]
            +-- SPAN

And thus, if we set

    DIV {color: red}
    DIV::slot(b) {color: blue}

the SPAN becomes blue (unless there are other rules for the P or the 
SPAN, of course).



> [1] http://lists.w3.org/Archives/Public/www-style/2013Apr/0410.html



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Wednesday, 22 May 2013 19:39:56 UTC