RE: [css4-pseudo] The need for more powerful pseudo elements

Decorators vs Generated Content (Pseudo-elements)

I apologize in advance if this all sounds familiar.

Decorators: uses html templates to append markup to content for complex and dynamic styling.
Generated Content: prepends/appends text to content without modifying DOM.

The current state of generated content using pseudo-elements is that given a selector, you can append text in specified order.  ::before and ::after can take an ordinal to add additional styling.  The content is generated, skipping missing ordinals.

.headline[content-type="video"]::after(1) { /* some video logo in an icon font */ }
.headline[content-type="video"]::after(2) { /* the text "video" in a non-icon font */ }
.headline[content-type="text"]::after(3) { /* some text logo in an icon font */ }
.headline[author-type="ap"]::after(4) { /* some AP logo in an icon font */ }

If an element matches multiple of these, the content is tacked on in order:

<h3 content-type="video" author-type="ap">AP Video</h3>
[AP Video[video icon][video text][AP logo]]

The downside of this is that you have to either develop bands of ordinals, or know exactly how many pseudo-elements each data-attribute is going add.  For example, if you want to add text to the `content-type="text"` selector, then you have to increment all subsequent pseudo-element ordinals.

Decorators can solve this problem by using names rather than ordinals.  For example:

<decorator id="video-dec">
  <template>
    <content></content><small>[video logo] video</small>
  </template>
<decorator>

Bam.  No ordinals to worry about, and you can add additional text to that on a whim.
The problem here, though, is the <content> tag because it seems undefined in the spec what actually goes there if there's more than one decorator that mateches.

For example, assume <decorator id="ap-dec"> puts the AP logo after the content, what happens?

<h3 content-type="video" author-type="ap">AP Video</h3> ->
<h3 content-type="video" author-type="ap">AP Video</h3><small>[video logo] video</small> ->
<h3 content-type="video" author-type="ap">AP Video</h3><small>[video logo] video</small> <small>[AP logo]</small>

That would mean that the result of applying "video-dec" would actually be the content passed to "ap-dec", but the spec says the contents of the element that matches gets inserted into <content>.  More likely, we'd wind up with parallel appications, with one being discarded.

<h3 content-type="video" author-type="ap">AP Video</h3><small>[video logo] video</small>
<h3 content-type="video" author-type="ap">AP Video</h3><small>[AP logo]</small>

Which one stays?  I have no idea, but both of them staying is *clearly wrong*.

As a solution to the problem of having multiple portions of an ::after that's maintainable, I think a more robust (read: arbitrarily nesting) pseudo-element system is non-hacky.  The first example would allow better boxing:

[AP Video [[video icon][video text]][AP logo]]

The video portion of ::after()s could be expaned as needed because it's nested away from interfering with siblings.  The real use-case for this is when you need *multiple and compound* pseudo-elements.  Decorators really are fantasitc, but just not in this case (at least without expanding the specification).

Thoughts and feedback are always appreciated.
-s

Received on Monday, 29 April 2013 19:03:29 UTC