Re: [css-flexbox] Broken example formatting, #main is floated right

On Mon, May 18, 2015 at 6:42 AM, Ryan Prichard <ryan.prichard@gmail.com> wrote:
> I noticed a formatting/styling issue.  In a few examples in the latest spec
> (http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/), there are `#main`
> selectors that appear on the right edge of the document.  In the previous
> draft (http://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/), the examples
> weren't styled, and `#main` appeared in-line with the rest of the example.
>
> I assume this was an oversight.  The floating is confusing, especially the
> `#main#main#main` appearing to the right of `> article,  > nav,  > aside {`.
>
> The `#main` selector is a span element of class `token id`:
>
>     <span class="token selector"><span class="token id">#main</span> </span>
>
> `span.id` is assigned `float: right` by `default-TR.css:15`:
>
>   span.id {float: right; font-weight: bold}

Oof, thanks for pointing that out.  Looks like a bad interaction
between the syntax highlighter (which happens to put a class of "id"
on the ID selector) and the default stylesheet (which has a rule for
span.id for some reason).

I don't think I've ever seen a span.id in a spec.  I'll investigate
and see what we can do to fix this.

(This is also a wonderful example case for encapsulation of styles. If
the examples were highlighted in Shadow DOM or similar, we wouldn't
have this kind of harmful interaction.)

~TJ

Received on Tuesday, 2 June 2015 16:26:28 UTC