Request: support for CSS custom properties #3144

Closed
Getfree opened this Issue Jun 6, 2016 · 7 comments

Comments

Projects
None yet
4 participants

Getfree commented Jun 6, 2016

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

Member

mgol commented Jun 6, 2016

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 commented Jun 6, 2016

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.

Member

mgol commented Jun 6, 2016

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.

Owner

dmethvin commented Jun 9, 2016

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

Member

mgol commented Jun 9, 2016

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

Getfree commented Jun 9, 2016

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.

Owner

timmywil commented Jun 20, 2016

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

timmywil removed the Needs review label Jun 20, 2016

timmywil added this to the 3.1.0 milestone Jun 20, 2016

@ConnorAtherton ConnorAtherton added a commit to ConnorAtherton/jquery that referenced this issue Jun 25, 2016

@ConnorAtherton ConnorAtherton CSS: Support custom properties, #3144 d90fc90

ConnorAtherton referenced this issue Jun 29, 2016

Closed

CSS: Support custom properties, #3144 #3199

3 of 4 tasks complete

mgol self-assigned this Feb 13, 2017

@mgol mgol added a commit to mgol/jquery that referenced this issue Mar 1, 2017

@ConnorAtherton @mgol ConnorAtherton + mgol CSS: Support custom properties
Fixes gh-3144
Closes gh-3199
8ad464d

mgol referenced this issue Mar 1, 2017

Merged

CSS: Support custom properties #3557

4 of 4 tasks complete

@mgol mgol added a commit to mgol/jquery that referenced this issue Mar 6, 2017

@ConnorAtherton @mgol ConnorAtherton + mgol CSS: Support custom properties
Fixes gh-3144
Closes gh-3199
Closes gh-3557
4787025

@mgol mgol added a commit to mgol/jquery that referenced this issue Mar 7, 2017

@ConnorAtherton @mgol ConnorAtherton + mgol CSS: Support custom properties
Fixes gh-3144
Closes gh-3199
Closes gh-3557
f7cb569

@mgol mgol added a commit to mgol/jquery that referenced this issue Mar 7, 2017

@ConnorAtherton @mgol ConnorAtherton + mgol CSS: Support custom properties
Fixes gh-3144
Closes gh-3199
Closes gh-3557
619bf98

mgol closed this in #3557 Mar 7, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment