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

dynamic states and pseudo elements for inline styles

From: James Kyle <me@thejameskyle.com>
Date: Mon, 7 Nov 2016 10:52:16 -0800
Message-ID: <CAEpbnA-jz2kzNS0=+4merEw1b4uOF+5_FgeN7YU-gu722sD8LA@mail.gmail.com>
To: www-style@w3.org

I would like to revive this draft
<https://www.w3.org/TR/2002/WD-css-style-attr-20020515> from 2002, which
adds the following syntax to style="...".

<a href="http://www.w3.org/"
          style="{color: #900}
          :link {background: #ff0}
          :visited {background: #fff}
          :hover {outline: thin red solid}
          :active {background: #00f}">...</a>

This makes a lot of sense today due to a growing percentage of web
developers writing styles inline rather than in separate stylesheets.

- https://speakerdeck.com/vjeux/react-css-in-js
- https://formidable.com/blog/2015/03/01/launching-radium/
- https://docs.angularjs.org/api/ng/directive/ngStyle
- https://github.com/smyte/jsxstyle
- https://github.com/threepointone/glamor/blob/master/docs/createElement.md

However, as you can see in some of those links there has been a lot of
effort around making :states, ::pseudo elements, and @media queries work
with inline styles.

Most of these would be solved by that proposal (minus media queries - which
are less of a concern).

Although I'd like to suggest the following changes:

<a href="http://www.w3.org/"
          style="color: #900;
          :link {background: #ff0};
          :visited {background: #fff};
          :hover {outline: thin red solid};
          :active {background: #00f};">...</a>

- No curly { } braces around the existing inline styles - this prevents the
browsers from rendering them today
- A semicolon after { } blocks so that style="color: red; :hover {...};
text-decoration: underline; works in browsers today.

Received on Tuesday, 8 November 2016 09:07:28 UTC

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