Re: Pseudo-element proposal

On Tue, Aug 7, 2012 at 10:47 AM, Alan Stearns <stearns@adobe.com> wrote:
> Dear www-style,
>
> We at Adobe have started working on a new specification extracting the
> notion of Pseudo-Element from the Selectors REC and extending it to
> allow multiple "before" and "after" pseudo-elements created by one
> single element. This is useful for effects like the ones collected in
>
>    http://css-tricks.com/use-cases-for-multiple-pseudo-elements/
>
> but can serve other purposes like creating boxes for CSS Regions.
> It will also simplify the level 4 Selectors spec, separating
> the notion and grammar of pseudo-elements from their syntax and
> rendering definitions.
>
> The proposal is available at
>
>
> http://adobe.github.com/web-platform/utilities/css-pseudo-elements/docs/css4-pseudoelements.html
>
> We have implemented a JavaScript-based prototype to allow us to
> validate the syntax. The code is available at
>
>    https://github.com/adobe/css-pseudo-elements
>
> and demos based on that prototype are available at
>
>    http://adobe.github.com/web-platform/utilities/css-pseudo-elements/
>
> We expect discussion about this proposal to happen during
> the forthcoming CSS WG face-to-face meeting in San Diego
> and will happily respond to all feedback sent to www-style
> with a leading "[css4-pseudos] " in the subject line.

I'm definitely in favor of this.  I've wanted multiple before and
after pseudos for forever, ever since I first discovered the CSSWG and
read the old Generated Content draft.

I also approve of ::nth-pseudo().  Nice functionality, especially for columns!

Some critiques:

1) If you're creating multiple similar pseudos, you'll obviously want
to fold the repeated styles into a single rule.  You *could* do it by
chaining selectors with a comma (e.g. "foo bar::before(5), foo
bar::before(6), foo bar::before(7)"), but I suspect that people will
end up wanting to instead use ::nth-pseudo for it.  Unfortunately,
because of the index/ordinal mismatch, this is fragile to pseudos
being inserted before them.
Maybe this could be relegated to ::matches() or something, like "foo
bar:matches(::before(5), ::before(6), ::before(7))", I dunno.

2) The other nth-* things are all pseudoclasses, which is useful for
some use-cases because you can stack them.  For example, to select the
7th through 10th children of an element, you can do "foo:nth-child(7 +
n):nth-child(10 - n)".  You can't stack the ::nth-pseudo things,
though, because they're pseudo-elements.  This is somewhat
unfortunate.  This doesn't seem easily addressible without reifying
pseudo-elements in Selectors, so that they're independent "elements"
that can accept other simple selectors.


Related to (2), it would be unfortunate if we continued to be unable
to use things like :hover on pseudos.  I suggest a general solution to
this problem - recast the :: as a combinator, shifting into the
element's pseudo-tree.  I've explored this before, and there are a few
wrinkles because of the way that pseudo-element syntax generally
interacts with other selectors (for example, "::before" is a valid
selector, but if :: is recast this then becomes a selector starting
with a combinator, which is a no-no), so we'll need some exceptions to
accommodate today's syntax.

Once you have that, though, this becomes easier.  You can throw away
::nth-pseudo entirely, and replace it with the existing :nth-of-type()
selector, like "foo :: before:nth-of-type(even)" to select all the
even "before" pseudos.  (Or, omitting unnecessary whitespace,
"foo::before:nth-of-type(even)", which looks like the natural
extenstion of today's syntax.)  Then "foo::before:hover" is nice and
easy!

I haven't yet reviewed the API parts in any detail.

~TJ

Received on Tuesday, 7 August 2012 18:21:50 UTC