css - 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/

Answer 1

我知道了 ;]

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