Do CSS variables work differently in Microsoft Edg

问题:

I am developing a web site and have optimized it for Firefox and Chrome. The project contains a style sheet called base.css which is included in all the pages, and which contains some global settings and definitions, including a list of variables which I use to store color values like such:

:root {
    --yellow-1: #fff8e3;
    --yellow-2: #ffe9a9;
}

and so on, and calling them like for example:

.a-class {
    background-color: var(--yellow-2);
}

When I look at the page in Edge, all the colors are missing, and when I use the DOM explorer, it marks all uses of the variables with red underlines. Does Edge not support CSS variables in this way? What can I do to work around this?

回答1:

MS Edge does support CSS variables from EdgeHTML v15:

https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/

This is also backed up here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

---

The syntax is as follows:

Declaring a variable:

element {
  --main-bg-color: brown;
}

Using the variable:

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