这些带有双破折号的CSS属性有什么作用? [英] What do these double-dash-prefixed CSS properties do?

问题描述

我遇到了这个奇怪的CSS代码此处:

I met this strange CSS code 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标准.

I've never seen such CSS properties names before and can't find information about them. But browser inspectors (checked it in Chrome, Safari and Firefox) say they are valid CSS properties, so it must be a CSS standard.

我尝试添加自己的财产，该财产也有效:

I tried to add my own property and it is valid either:

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

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

What do these properties do? What the CSS standard describes it? Where can I find a reference about it?

推荐答案

双引号用于定义自定义属性.有关更多信息，请查看 W3C规范页面.

A double leading dash is used for defining custom properties. For more information, check out this W3C Spec page.

W3C的示例:

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

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

这篇关于这些带有双破折号的CSS属性有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！