W3C home > Mailing lists > Public > www-style@w3.org > April 2013

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

From: Sam L'ecuyer <sam@cateches.is>
Date: Mon, 29 Apr 2013 15:03:00 -0400 (EDT)
To: "Fran├žois REMY" <francois.remy.dev@outlook.com>
Cc: "Brad Kemper" <brad.kemper@gmail.com>, "Tom Wardrop" <tom@tomwardrop.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <1367262180.9901332@apps.rackspace.com>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:10 UTC