W3C home > Mailing lists > Public > www-style@w3.org > November 2016

Re: dynamic states and pseudo elements for inline styles

From: Zack Weinberg <zackw@panix.com>
Date: Wed, 9 Nov 2016 14:20:46 -0500
Message-ID: <CAKCAbMhC1QEkKeHTZk-ZtH4N8V_wnnKkojGLvmbOvpw3REjzWQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: James Kyle <me@thejameskyle.com>, www-style list <www-style@w3.org>
On Wed, Nov 9, 2016 at 1:57 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>
>> We need to bring this up as a WICG topic; when we get implementor
>> interest, it'll be promoted to a WICG spec; when it's mature, it'll
>> return to the CSSWG, presumably as a new level of the style-attr spec.
>
> And the first step is done:
> https://discourse.wicg.io/t/proposal-expand-inline-style-attributes-to-allow-pseudo-class-element-styling/1812

I like the idea in general, but can I make a quick suggestion?  Right
now, the contents of a style attribute are syntactically and
functionally identical to the contents of a declaration block.  We
could maintain that equivalence if pseudo-class/element blocks were
allowed inside declaration blocks in general, as well as per-element
style properties.  This would be easier to spec and implement (keep
the existing parser entry point for style attributes, just change the
css3-syntax definition of "consume a list of declarations"), easier to
teach (because there isn't anything that is allowed in one place but
not the other), and would save typing in some common cases with
stylesheets.

For example:

<style>
header > a {
                 color: #000; text-decoration: none;
   :visited { color: #000; text-decoration: none; }
   :hover  { color: #222; text-decoration: underline }
}
</style>
<header><a href="/">This is the Name of My Site</a></header>

same as

<style>
header > a            { color: #000; text-decoration: none;
header > a:visited { color: #000; text-decoration: none; }
header > a:hover  { color: #222; text-decoration: underline }
</style>
<header><a href="/">This is the Name of My Site</a></header>

same as

<header><a style="
                 color: #000; text-decoration: none;
   :visited { color: #000; text-decoration: none; }
   :hover  { color: #222; text-decoration: underline }
" href="/">This is the Name of My Site</a></header>

zw
Received on Wednesday, 9 November 2016 19:21:15 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:05 UTC