-1

IE11 does not seem to calculate hsl(31, 86, calc(54% - 10%)), but all other browsers do.

I want to use calc in hsl value with CSS Custom Properties(css variables). And I don't want to use SASS functions. (I use this polyfill to use css variables for IE11. https://github.com/jhildenbiddle/css-vars-ponyfill )

:root{
  --accent-color-h: 31;
  --accent-color-s: 86%;
  --accent-color-l: 54%;
}
.darken .accent-color{
  background-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 10%));
  }
ayame
  • 3
  • 1

1 Answers1

3

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

source: https://caniuse.com/#feat=calc

You'll need to scrape your requirement for calc() in this context

Daemon Painter
  • 3,208
  • 3
  • 29
  • 44