Re: dynamic states and pseudo elements for inline styles

> However, I feel that much of that inlining of styles is generally
> misguided, and isn't really something we should be encouraging.

I would point to https://github.com/w3c/csswg-drafts/issues/270 to see
what inline styles are trying to solve.

*Kevin Suttle*


----- Original message -----
From: Florian Rivoal <florian@rivoal.net>
To: James Kyle <me@thejameskyle.com>
Cc: www-style@w3.org
Subject: Re: dynamic states and pseudo elements for inline styles
Date: Tue, 8 Nov 2016 18:26:44 +0900


> On Nov 8, 2016, at 03:52, James Kyle <me@thejameskyle.com> wrote:
>
> Hello
>
> I would like to revive this draft[1] 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.

If we go that way, I agree with your suggested changes to the syntax for
compatibility reasons. However, I feel that much of that inlining of
styles is generally misguided, and isn't really something we should be
encouraging.

- Florian

Links:

  1. https://www.w3.org/TR/2002/WD-css-style-attr-20020515