Do CSS Variables Work Differently 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');
}

Microsoft Edge not respecting certain pseudo elements' CSS

It appears to be a problem relating to the use of CSS variables. If you change the background colour to be a simple hex value, the problem goes away.

Wrong CSS positioning with Chrome/Edge when using columns

I successfully restored these buttons to regular position by adding display:inline-block to the div_columns class.

As to the copy rule issue, I found it in my devtools, too. The only conclusion I've got is that if you right-click inside the braces {}, the context menu looks like below. The "Copy rule" option here works as expected:

But if you right-click outside the braces, the context menu changes like below. The "Copy rule" option here will lead to a crash of devtools (actually any option here will lead to a crash). But what's more interesting is that the style rule will still be on your clipboard. So I suggest sending a feedback to Edge team by pressing Shift+Alt+I in Edge:

How to fix css grid for microsoft edge version above 17, still doesnt work even with prefix

There is no longer problem left, just added 9 anchor instead of a div and added in css a {display:content} and it works for any browser

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

Using a variable inside -moz-linear-gradient breaks the style

You need to put your prefixed styles above the standard style, e.g.

background: -moz-linear-gradient(...) no-repeat bottom left;
background: linear-gradient(...) no-repeat bottom left; 

Otherwise the browser will attempt to use the last valid style, which I believe causes problems since background is a combined style so you end up overwriting your linear-gradient with a -moz-linear-gradient that Chrome doesn't understand.

Working example:

.red {
  --custom-color: #FF0000;
}

.first::before {
  content: '';
  position: absolute;
  width: 19rem;
  height: 14rem;
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, red 70%, transparent 72%) no-repeat bottom left;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}

.second::before {
  content: '';
  position: absolute;
  top: 250px;
  width: 19rem;
  height: 14rem;
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}

<div class="first red"></div>
<div class="second red"></div>

---

Related Topics