html - 自定义 CSS 属性是否使用一个或两个前导破折号？

Question

#elem {
  -myCustom: 99;
}

或

#elem {
  --myCustom: 99;
}

我在网上的例子中看到了以上两种情况。两者有什么区别？

尝试访问 JavaScript 中的自定义属性返回 null..

#elem {
-myCustom: 99;
}

<div id="elem">some text</div>

elem = document.getElementById("elem");
style= window.getComputedStyle(elem);
value = style.getPropertyValue('-myCustom');
alert(value);

Answer 1

• 单前导破折号用于供应商前缀
• 双前导破折号用于定义custom properties .

2 Defining Custom Properties: the '--*' family of properties

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes.

来自 W3C 的示例:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

值得注意的是，CSS 变量在 Firefox 31 及更新版本中实现。