Re: Pseudo-element proposal

Hi,

While I support the need of new pseudo-elements, I've a problem with ordinal 
numbering.

Firstly, ordinal numbering makes it unclear what each pseudo-element is 
doing, which is bad for a readability point of view (I know that at Adobe 
you work mostly on HTML generators which don't care too much about this, 
because generators have other solutions than compiled source code to find 
their way, but features shipped in CSS should be as much as possible 
author-friendly). Secondly, when pseudo-elements are inserted or removed, 
the reordering can become a nightmare.


I know I already proposed the syntax in the [1] comment thread (and I agree 
it comes with its own pitfalls) but I think a slot-based solution is better 
suited to solve this problem:

    element::before {
        content: slot(absolute counter) slot(absolute bubble) slot(absolute 
bubble) open-quote;
    }

    element::after {
        content: close-quote;
    }

    element::slots(absolute) {
        position: absolute;
    }

    element::slots(bubble) {
        content: "";
        background-color: ...;
        ...
    }

    element::nth-slot(bubble, 0) {
        bottom: ...; left: ...; ...
    }

    element::nth-slot(bubble, 1) {
        bottom: ...; left: ...; ...
    }

    element::nth-slot(counter, 0) {
        content: attr(data-counter);
        top: ...; right: ...; ...
    }



Key features:

- Slots have one or more class names, which make their selection easy and 
semantic.
- Indexes are relative to their class names, which create an isolation 
between unrelated slots.
- Slots can be defined in any of the available root pseudos (::after, 
::before, ...) or, in the future, as part of the generated content of the 
element itself.

Best regards,
François




-----Message d'origine----- 
From: Alan Stearns
Sent: Tuesday, August 07, 2012 7:47 PM
To: www-style@w3.org
Cc: Chris Coyier
Subject: Pseudo-element proposal

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/css
4-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.

Best regards,

Razvan Caliman, Adobe Systems, Inc.
Daniel Glazman, Disruptive Innovations SAS
Alan Stearns, Adobe Systems, Inc.

Received on Tuesday, 7 August 2012 19:56:23 UTC