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

Question

我在这里遇到了这个奇怪的CSS代码:

: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规范页面.

W3C的例子:

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

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