这些双短划线CSS属性有什么作用？

Question

我遇到了这个奇怪的CSS代码here：

:root {
    --color-link: #04b;
    --color-link-visited: #551a8b;
    --color-link-minor: #669;
    --color-black: #000;
    --color-grey: #999;
    --font-thin: HelveticaNeue-thin,sans-serif-thin;
    --font-light: HelveticaNeue-Light,sans-serif-light;
    --text-s: 11px;
    --text-s-line-s: 1em;
    --text-s-line-m: 1em;
    --typo-caps: 11px;
    --typo-greenurl: 13px;
}

我之前从未见过这样的CSS属性名称，也无法找到有关它们的信息。但浏览器检查员（在Chrome，Safari和Firefox中检查过）表示它们是有效的CSS属性，因此它必须是CSS标准。

我尝试添加自己的属性，它有效：

:root {
    --color-foobar: #000;
}

这些属性有什么作用？ CSS标准描述了什么？我在哪里可以找到关于它的参考？

Answer 1

双引导破折号用于定义自定义属性。有关详细信息，请查看此W3C Spec页面。

来自W3C的例子：

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}