Request: support for CSS custom properties

[Getfree]

Now that CSS custom properties are supported by most browsers (except for IE), please consider adding support for them in the .css() method.

Example:

<div style="--color: red; color: var(--color)">text</div>
<script>
$('div').css('--color') ; // should return "red"
$('div').css('--color','blue') ; // should change text color to blue

//without jQuery we must currently do it like this:
getComputedStyle($('div')[0]).getPropertyValue('--color') ;
$('div')[0].style.setProperty('--color','blue') ;
</script>

JsFiddle here

[mgol]

Adding support shouldn't be that hard. The core issue, from what I see, is that while the regular properties can be accessed & written to via the node.style[property] property this doesn't apply to CSS Custom Properties, for them we'd need node.style.getPropertyValue(property) & node.style.setProperty(property, newValue).

The bigger issues is if it won't decrease performance for other properties. If it does we could apply special logic that would use the methods only if the name starts with --.

I'd love to have this supported but we need to be careful.

Thanks for the report!

[Getfree]

node.style.getPropertyValue(property) won't work because that only gives the properties set on the element itself.
You have to do getComputedStyle(node).getPropertyValue(property).

But that's what jQuery is already doing for normal properties anyways, because .css() gives computed property values, not directly set values.

[mgol]

Yes, I meant style, not node.style which was a placeholder for any CSSStyleDeclaration, sorry. For the getter we use getComputedStyle but for setting we use node.style[property], obviously.

[dmethvin]

Seems pretty doable to me as well. I like it!

[mgol]

@Getfree Would you like to try to prepare a pull request?

[Getfree]

Honestly, I wouldn't feel comfortable doing that.
I haven't look into the source code, but I suspect it won't be as simple as writing a wrapper around the native JS API.
My understanding is that jQuery is supposed to be an extra layer that abstracts away browser differences and incompatibilities. And I don't know how you guys handle cases like this where a feature is missing in some browsers (IE in this case).
There's also the different branches that target some browsers and not others, like the jQuery branch that supports IE 6,7,8 and the one that doesn't.

[timmywil]

Let's try this out, but it won't be treated as a blocker.