Do custom CSS properties use one leading dash or two?

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/