dynamic states and pseudo elements for inline styles

Hello

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.


Peace