calc() function not returning percent

Question

I'm using a polyfill for CSS custom properties.

Here is my variables (everything work on modern browsers) :

--main-color-hue: 205; --main-color-saturation: 73%; --main-color-luminosity: 29%; --main-color: hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1); --main-dark-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1); --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1); --main-text-color: hsl(0,100%, calc((30% - var(--main-color-luminosity)) *100)); --main-dark-text-color: hsl(0,100%, calc((30% - var(--main-color-luminosity)*0.5) *100)); --main-light-text-color: hsl(0,100%, calc((30% - var(--main-color-luminosity)*1.5) *100));

With the polyfill, I get this result for --main-text-color :

a { background-color: red; color: hsl(0,100%, calc((30% - 29%) * 100)); }

<a href="#">My link</a>

And this result doest not work on IE10 and IE11...

Plastic · Accepted Answer · 2019-12-13 09:23:08Z

Your semantic is correct but, as mentioned at caniuse.com in the "Known Issues" tab:

"IE does not support calc() on color functions. Example: color: hsl(calc(60 * 2), 100%, 50%)."

So I believe it's not your code's fault, that "calc" it's just not working on IE

Collectives™ on Stack Overflow

calc() function not returning percent

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related