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

Re: dynamic states and pseudo elements for inline styles

From: Florian Rivoal <florian@rivoal.net>
Date: Tue, 8 Nov 2016 18:26:44 +0900
Cc: www-style@w3.org
Message-Id: <2086D144-FAB5-4616-8428-2A183E2B9A0F@rivoal.net>
To: James Kyle <me@thejameskyle.com>

> On Nov 8, 2016, at 03:52, James Kyle <me@thejameskyle.com> wrote:
> 
> 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/ <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://speakerdeck.com/vjeux/react-css-in-js>
> - https://formidable.com/blog/2015/03/01/launching-radium/ <https://formidable.com/blog/2015/03/01/launching-radium/>
> - https://docs.angularjs.org/api/ng/directive/ngStyle <https://docs.angularjs.org/api/ng/directive/ngStyle>
> - https://github.com/smyte/jsxstyle <https://github.com/smyte/jsxstyle>
> - https://github.com/threepointone/glamor/blob/master/docs/createElement.md <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/ <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


Received on Tuesday, 8 November 2016 09:27:15 UTC

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