CSS变量在Microsoft Edge中的工作方式是否有所不同? [英] Do CSS variables work differently in Microsoft Edge?

问题描述

我正在开发一个网站，并针对Firefox和Chrome对其进行了优化.该项目包含一个名为base.css的样式表，该样式表包含在所有页面中，并且包含一些全局设置和定义，包括一些变量列表，我使用这些变量来存储诸如以下的颜色值:

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

当我在Edge中查看页面时，所有颜色都丢失了，并且当我使用DOM资源管理器时，它用红色下划线标记了所有变量的使用. Edge是否不以这种方式支持CSS变量?我该怎么办才能解决此问题?

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?

推荐答案

MS Edge确实支持EdgeHTML v15中的CSS变量:

MS Edge does support CSS variables from EdgeHTML v15:

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

这也在这里备份:

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

语法如下:

声明变量:

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

使用变量:

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

这篇关于CSS变量在Microsoft Edge中的工作方式是否有所不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！