Question

#elem {
  -myCustom: 99;
}

OR

#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

自定义属性是名称以两个破折号开头的任何属性   （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-箱阴影

-moz-箱阴影 ...

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

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

自定义CSS属性使用一个或两个前导短划线吗？

2 个答案: