currentColor set as a custom property doesn't work in Edge

Question

When a color is set to currentColor via custom property it doesn't work.

No matter whether property is set in a :root or a .selector scope.

But when it is set as a currentColor directly it does work.

I checked it locally and on Browserstack. Edge ver. 17, 16

:root {
  --btn-content--color: currentColor;
}
.btn {
  color: red;
}
.btn-content {
  color: var(--btn-content--color); // doesn't work
}
.btn-content {
  color: currentColor; // works
}

You can try it yourself here: https://jsfiddle.net/9gmbfwu4/

According to [caniuse.com](https://caniuse.com/#search=currentColor), Edge fully supports the `currentColor` keyword, as well as CSS variables. — connexo, Nov 23 '18 at 13:21
all other custom properties in Edge that we have do work, just this one doesn't `--btn-content--color: currentColor;` — Luka Gronko, Nov 23 '18 at 13:31

score 2 · Accepted Answer · answered Nov 23 '18 at 14:15

2

I got it ;]

:root {
  --btn-content--color: 'currentColor';
}
.btn {
  color: red;
}
.btn-content {
  color: var(--btn-content--color); // works as expected
}

answered Nov 23 '18 at 14:15

Luka Gronko

423
4
13

1

From your last post I can see that you had solved the issue and posted your solution. I suggest you to mark that solution as an accepted answer for this question may help other community members in future. Thanks for your understanding. – Deepak-MSFT Nov 26 '18 at 02:12
@Deepak-MSFT yeah, I just did. Anyway would be cool if someone knows why it behaves like that. – Luka Gronko Nov 26 '18 at 09:49
1

@ Luka, I will try to find an information about it, If any useful information is available for this topic then I will try to provide you. – Deepak-MSFT Nov 26 '18 at 09:55

currentColor set as a custom property doesn't work in Edge

1 Answers1