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

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

2 定义自定义属性：'--*' 属性系列

自定义属性是名称以两个破折号 (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 和更新版本中实现的。

Answer 2

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

例如：

-webkit-box-shadow

-moz-box-阴影...

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

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