W3C home > Mailing lists > Public > www-style@w3.org > June 2015

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 2 Jun 2015 09:25:40 -0700
Message-ID: <CAAWBYDDmpsK-zZps=UqhqrL2KTiOpD=3GgOVr2xOmC2CuP6hOw@mail.gmail.com>
To: Ryan Prichard <ryan.prichard@gmail.com>
Cc: www-style list <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:14 UTC