Do custom CSS properties use one leading dash or two? - html

Question

#elem {
-myCustom: 99;
}
OR
#elem {
--myCustom: 99;
}
I have seen both of the above used in examples online. What the difference between the two?
Trying to access custom properties in JavaScript returns 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

single leading dash is used for vendor prefixes
double leading dash is used for defining 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.
An example from W3C:
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
It's worth noting that CSS variables are implemented in Firefox 31 and newer.

Answer 2

Custom properties use one dash, by convention followed by the renderer/software.
For example:
-webkit-box-shadow
-moz-box-shadow
...
But it seems that there is a new feature implementing two dashes, this might be interesting for you:
http://www.broken-links.com/2014/08/28/css-variables-updating-custom-properties-javascript/