自定义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);

- JavaScript_is_4_Real_men

---

我非常确定-myCustom: 99;是无效的，并且（大多数）Web浏览器将忽略它。（我也确定它与任何类型的浏览器黑客无关）。 - Hashem Qolami

@HashemQolami 从技术上讲，浏览器应该忽略它，因为它是一个自定义属性，但即使是自定义属性，仍然可以通过getComputedStyle()访问。 - JavaScript_is_4_Real_men

实际上，它是一个无效的属性（自定义属性，现在具有特殊含义）。但是我不确定JavaScript是否可以访问非标准CSS属性。 - Hashem Qolami

Answer 1

• 单个前导破折号用于供应商前缀
• 双前导破折号用于定义自定义属性custom properties。

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

任何名称以两个连字符（U+002D HYPHEN-MINUS）开头的属性都是自定义属性，例如--foo。 <custom-property-name>生产对应于此：它被定义为任何以两个破折号开头的有效标识符。

来自W3C的示例：

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

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

- Hashem Qolami

---

请注意：CSS变量仅适用于Firefox 31+——它们已从Chrome中移除https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ScKw9zYRkBc，并且在Safari和IE中也不起作用 :) - Bojan Petkovski

六年半的时间带来了巨大的变化... CSS 变量现在被所有主流浏览器支持，包括 Chrome、Edge 和 Safari（不支持 IE 或 Opera Mini）：https://caniuse.com/css-variables - Kevin Fegan

Answer 2

自定义属性使用一个破折号，惯例上跟随渲染器/软件。

例如：

-webkit-box-shadow

-moz-box-shadow ...

但似乎有一种新功能实现了两个破折号，这可能对您很有趣：

http://www.broken-links.com/2014/08/28/css-variables-updating-custom-properties-javascript/

- Ercksen

---

嘿，我刚刚也在阅读同一篇文章，但是无法让JavaScript返回除null以外的任何值。这是怎么回事？ - JavaScript_is_4_Real_men

我还没有完全阅读这篇文章，你可以贴一小段给我看看吗？ - Ercksen

你在HTML中实现了一个带有该ID的元素吗？ - Ercksen

我们已经学到了自定义属性以两个斜杠开头。那么把它改成--myCustom怎么样？否则...我明天会看一下并试一下。 - Ercksen

这些不是自定义属性；这些是供应商扩展，与自定义属性完全不同的概念。 - BoltClock