Re: [css3-lists] Published as WD!

On Mon, Jun 6, 2011 at 8:58 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> That is also ensured if the 'content' property pulls in the marker content instead of having it pushed in via the 'position' property, because then only the ::marker rule will style it if it is a marker; nothing else will. So for if the marker rule doesn't take effect on a particular element, it can still be styled in the traditional way with styling that would be most appropriate. In fact, if fallback is your concern (or even accidentally selecting too many elements to be the marker), then having 'content' pull in the content of the marker is even better, because it allows you to have your choice of any position value you want when the ::marker rule doesn't take effect.
>
> Consider the following, in which I want to control 'position' in the marker and in the fallback:
>
> ul { margin-left:0; }
> li { margin-left: 8em; position:relative; list-style-type:none; }
> li b:first-of-type { position:absolute; left: -8em; width:8em;  color:red; }
> li b:first-of-type i { position: absolute; left:100%; }
>
> li::marker { content: descendant-select-first("b") ": " ; position: relative;  width:5em; color:green; }
> li::marker i { position: absolute; left:100%; }
>
> <ul>
>        <li><b>1002.1984<i>.36</i></b> Thusly, heretofore, in recompense, bla bla bla...
>
> The above markup would let me have the bold item in (about?) the same place as it would be as with ::marker, for fallback in earlier UAs. It also lets me have all the italic elements align with each other, while the text to the left of them can wrap if necessary (assume wrapping at the decimal).
>
> If ::marker content property works, then all the marker text is green; otherwise it is red.

I definitely don't think it's okay to have the element-tree be
rearranged by properties.  That's a big layering violation.


> I don't think that sort of thing is possible using 'position:marker', without more extensive workarounds.

Correct.  However, using 'position:marker' on arbitrary elements is
only useful for when you have an inline marker that you *really* want
to position as if it were an 'outside' marker.  Until you can depend
on this being supported, you can just live with your inline markers
looking like an 'inside' marker; that is, just do this:

li {
  list-style: none;
}
li > .marker {
  position: marker;
  display: inline;
  /* more styling here */
}

This would produce something that looks like an 'inside' marker on
legacy browsers, but will give you a proper 'outside' marker on
supporting ones.  This seems like an acceptable level of fallback.

~TJ

Received on Thursday, 9 June 2011 19:12:49 UTC