Search code examples
cssinternet-explorer-11calchsl

CSS hsl calc bug in IE11

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%));
  }
Solution

  • 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