CSS - 如何在 Chrome 和 Firefox 中启用自定义属性？答案

【问题标题】：CSS - How to enable custom property in Chrome and Firefox?CSS - 如何在 Chrome 和 Firefox 中启用自定义属性？
【发布时间】：2020-06-25 04:33:51
【问题描述】：

您好，目前我正在学习 CSS，并且看到了 CSS 自定义属性。我试图在 VS-Code 上创建一个变量并使用 LiveServer 运行它，但我的变量似乎不起作用。为了在 Chrome/Firefox 上使用 CSS 变量，我需要先启用什么？如何启用它？谢谢。

我使用的是 Firefox 68.9.0esr（32 位）和 Chrome 83.0.4103.116（官方版本）（64 位）

我的 css 变量只有这样：

@import url('http://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap')
:root {
    --mistyrose: #ffe4e1;
    --blue: #118add;
    --green: #71cf17;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--mistyrose);

    /* center content */
    margin: 0 auto;
    width: 85%;
    border-right: 3px solid var(--blue);
    border-left: 3px solid var(--green);
}

【问题讨论】：

不，两种浏览器都支持开箱即用的变量。

标签： css google-chrome firefox

【解决方案1】：

好吧，您在 @import 语句中遗漏了一个分号 (;)，因此您的 :root 元素将被忽略，根本不会受到影响。

如果你修复它，它应该是这样的，你的代码将按预期运行：

@import url('http://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

:root {
  --mistyrose: #ffe4e1;
  --blue: #118add;
  --green: #71cf17;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--mistyrose);
  /* center content */
  margin: 0 auto;
  width: 85%;
  border-right: 3px solid var(--blue);
  border-left: 3px solid var(--green);
}

【讨论】：