CSS Variables Don't Work in Microsoft Edge

CSS Variables don't work in Microsoft Edge

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

Edge browser ignores CSS variable

It seems like the display: none; attribute of the .make-invisible class confuses Edge.

I thought updating the specificity of the .make-visible class to something like .foo.make-visible would make the problem go away but even then the issue persists on Edge.

The simplest solution IMO would be to remove the .make-invisible class from the div element because I don't see a reason why you would need to have both the .make-invisible and .make-visible classes on a single element at the same time.

Update

After considering your update I was able to come up with a hack that isn't too ugly. This not only gets around the issue on Edge but also doesn't affect the behavior on Chrome or FF.

What you will need to do is define the class twice with each property in an individual class like:

    .foo {
      display: block;
    }
    .foo {
      display: var(--display-var, block);
    }

Here's a working version of your demo: https://jsfiddle.net/sbr29yo6/

Use of URLs in CSS vars with Edge Browser

If you just browse the page through local file path, then the logo can't show in IE and Edge. But if you publish it as a website, it can work well in Edge and Chrome.

Besides, IE doesn't support CSS variables, you could add a polyfill to make it work in IE. You just need to import ie11CustomProperties.js into the page where you use the CSS variables. In this case, we can add the JavaScript file to index.html and Accounts/index.html.

I add the polyfill and publish the website to IIS and it can work well in all browsers: result in IE, result in Edge.

-------------------------------------------------------------Edit------------------------------------------------------------------

You could use root-relative path with "/" to avoid the issue. Please try to change client.css into this:

:root{
    --logo:url('/Resources/ClientOne/Images/logo.png');
}

currentColor set as a custom property doesn't work in Edge

I got it ;]

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

Microsoft Edge not loading CSS files with activated Windows Authentication

First of all thank you guys for your help!

I've finally figured out what was causing the problem:

Our lovely group-policy in my company blocked some certificates. I'm able to load the solution on our server and run it on IIS and not on IIS Express. Everything works fine there. Unfortunately we are restricted to change the security tab in internet options so I can not add localhost to the trusted websites.

Again, thanks to everyone for your help.

using css custom properties variables not working

You did everything right, just keep the variables in (put variable here)

element {
  --main-bg-color: brown;
}
body {
  background-color: var(--main-bg-color);
}

---

Related Topics