Intent to (Re)Implement: CSS Custom Properties (Variables)

[Levi Weintraub]

Contact emails

le...@chromium.org

Spec

http://dev.w3.org/csswg/css-variables/

Summary

CSS Custom Properties allow the defining of CSS variables that inherit down the tree, including through Shadow DOM.

Motivation

Allowing Shadow DOM content to be themed is hard. Potential solutions for this problem like /deep/ and ::shadow break encapsulation and have some negative performance implications.

Custom properties provides an alternative approach for this use case that avoids those pitfalls, and is already specced and implemented in Firefox.

Hey, didn't we already have this once?

Kind of. We had an implementation we never shipped (except behind a flag) and ultimately removed, partly to speed up the implementation of our new CSS Parser. That work has come along far enough that we can begin rebuilding this feature on top of it.

Compatibility Risk

Low.

Firefox has been shipping the feature since 31.

Internet Explorer lists it as under consideration.

WebKit removed the same old implementation we did.

No old content is broken by enabling the feature.

Ongoing technical constraints

None.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Affirmative.

OWP launch tracking bug?

https://code.google.com/p/chromium/issues/detail?id=465126

Link to entry on the feature dashboard

https://www.chromestatus.com/features/6401356696911872

Requesting approval to ship?

Not yet, hold your horses.

MDN has some more useful info for the curious: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

[Dimitri Glazkov]

Enthusiastic LGTM to implement.

:DG<

[Philip Rogers]

LGTM

[Chris Harrelson]

Levi, do you have a design document describing how this will be implemented? My understanding is that one reason we removed the old implementation is that it was not well integrated into the Blink architecture.

Chris

LGTM

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Levi Weintraub]

Specifically the issue was the performance burden CSS Variables placed on the Bison parser (see the motivation section of the intent to remove thread). We don't intend on implementing this version on top of the Bison parser at all this time around.

I don't have a design document at this moment.

[Elliott Sprehn]

It wasn't just the parser, when you turned on variables it showed up in all the recalcStyle profiles. At one point it was a 5-10% regression on that old animating balls benchmark.

[Philip Jägenstedt]

LGTM, this sounds very useful!

Will custom properties always inherit to Shadow DOM, so that it will be impossible to use them inside Shadow DOM for internal purposes? If you have a custom property for (say) the padding between elements, it doesn't necessarily mean that the layout would make sense if it's changed from the outside.

Philip

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Levi Weintraub]

On Thu, Mar 12, 2015 at 9:07 PM, Philip Jägenstedt <phi...@opera.com> wrote:

LGTM, this sounds very useful!

Thanks!

 

Will custom properties always inherit to Shadow DOM, so that it will be impossible to use them inside Shadow DOM for internal purposes? If you have a custom property for (say) the padding between elements, it doesn't necessarily mean that the layout would make sense if it's changed from the outside.

You can always locally override them by setting them internally to the expected values. The way the feature is specced, you can define them in a scope, you can explicitly reference a scoped value, or you can reference them with a default value that's used if there's not one defined in the current scope.

FYI I'm writing up a brief design doc to make it easier to continue the discussion of the implementation :)

[Elliott Sprehn]

On Thu, Mar 12, 2015 at 9:11 PM, 'Levi Weintraub' via blink-dev <blin...@chromium.org> wrote:

On Thu, Mar 12, 2015 at 9:07 PM, Philip Jägenstedt <phi...@opera.com> wrote:

LGTM, this sounds very useful!

Thanks!

 

Will custom properties always inherit to Shadow DOM, so that it will be impossible to use them inside Shadow DOM for internal purposes? If you have a custom property for (say) the padding between elements, it doesn't necessarily mean that the layout would make sense if it's changed from the outside.

You can always locally override them by setting them internally to the expected values. The way the feature is specced, you can define them in a scope, you can explicitly reference a scoped value, or you can reference them with a default value that's used if there's not one defined in the current scope.

FYI I'm writing up a brief design doc to make it easier to continue the discussion of the implementation :)

 

+1

[Philip Jägenstedt]

On Fri, Mar 13, 2015 at 11:11 AM, 'Levi Weintraub' via blink-dev <blin...@chromium.org> wrote:

On Thu, Mar 12, 2015 at 9:07 PM, Philip Jägenstedt <phi...@opera.com> wrote:

LGTM, this sounds very useful!

Thanks!

 

Will custom properties always inherit to Shadow DOM, so that it will be impossible to use them inside Shadow DOM for internal purposes? If you have a custom property for (say) the padding between elements, it doesn't necessarily mean that the layout would make sense if it's changed from the outside.

You can always locally override them by setting them internally to the expected values. The way the feature is specced, you can define them in a scope, you can explicitly reference a scoped value, or you can reference them with a default value that's used if there's not one defined in the current scope.

FYI I'm writing up a brief design doc to make it easier to continue the discussion of the implementation :)

Ah, this makes a lot of sense. Example 9 in the spec explains how this would work, with syntax like color: var(--header-color, blue).

Philip

[Hayato Ito]

LGTM. This is an exciting news and I really hope this would help theming.

I appreciate that a design doc would mention about whether CSS variables should inherit down also a *closed* shadow tree, in addition to an open shadow tree, or not.

[Takayoshi Kochi]

Levi,

What is the progress on this?  Is there any doc referenced in this thread?

--

Takayoshi Kochi

[zane...@gmail.com]

Levi, what is the progress on this? [2]
I need it at least by flags.
Enough of SASS/SCSS and LESS. :)

[PhistucK]

I got a reply from Levi on a different thread! :)

​

On Thu, Oct 1, 2015 at 9:51 PM, Levi Weintraub <le...@chromium.org> wrote:

Work is ongoing and experimental support is in its late stages of review: https://codereview.chromium.org/1192983003

☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.