Search code examples
cssmicrosoft-edgecss-variables

CSS Variables don't work in Microsoft Edge

I am designing a new blogger Template. I want to make it easy to change the whole template color at the same time by changing the value of the variable , so I used these lines:

:root {
  --bg-color: #fff;
  --url-color : #000;
  --main-color : #2daeeb;
  --main-hover-color : #2ca1de;
  --alt-color : #ff6347;
}

but unfortunately it doesn't work in Edge browser, even though I used the prefix:

-webkit-
Solution

  • CSS variables are not supported by IE nor will they ever be.

    Update:

    CSS variables are supported in Edge since EdgeHTML 15 (packaged with Windows 10 version 15063, available since March 2017.

    See here under Browser Compatibility.

    Also, the W3C spec.

    As an alternative you can use a CSS pre-processor to compile your CSS using variables in the way you describe.

    Docs on Sass

    Docs on Less