10
#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);
JavaScript_is_4_Real_men
  • 299
  • 3
  • 14
  • I'm quiet sure that `-myCustom: 99;` is invalid and it would be ignored by (most of) web browsers. (I'm also sure that it is not related to any kind of browser hacks). – Hashem Qolami Oct 22 '14 at 21:48
  • @HashemQolami Technically the browser should ignore it because it's a custom property, but even a custom property should still be accessible through getComputedStyle(). – JavaScript_is_4_Real_men Oct 22 '14 at 21:50
  • Actually it is an *invalid* property (custom property, has a special meaning now). However I'm not sure if [non-standard CSS properties](http://stackoverflow.com/questions/249991/can-i-fetch-the-value-of-a-non-standard-css-property-via-javascript) could be accessible by JavaScript. – Hashem Qolami Oct 22 '14 at 21:59

2 Answers2

10
  • 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.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Note: CSS Variables only work in Firefox 31+ — they've been pulled from Chrome https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ScKw9zYRkBc. Not working in Safari and IE also :) – Bojan Petkovski Oct 22 '14 at 21:06
  • 1
    What a difference 6 and a half years makes... CSS Variables are now supported by all major browsers including Chrome, Edge and Safari (not supported on IE or Opera Mini): https://caniuse.com/css-variables – Kevin Fegan Mar 07 '21 at 07:31
0

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/

Ercksen
  • 668
  • 9
  • 23
  • Hey I was just reading that same article but can't get the JavaScript to return any value except for null. WTF? – JavaScript_is_4_Real_men Oct 22 '14 at 21:08
  • I have not yet read the article completely, maybee you could post a snippet? – Ercksen Oct 22 '14 at 21:10
  • Have you implemented an element in your HTML with that id? – Ercksen Oct 22 '14 at 21:16
  • We have learned that custom properties start with two slashes. So what about changing it to --myCustom? Otherwise... I will have a look at it tomorrow and try it out – Ercksen Oct 22 '14 at 21:29
  • Exactly what I was thinking. However it still returns null, very strange considering there's so many examples online that say it works. Also tried FF31 and Ch. Still null. Thanks for your help! I do look forward to your further comments on this. – JavaScript_is_4_Real_men Oct 22 '14 at 21:43
  • Works fine in Firefox 32: ` ` – Ercksen Oct 23 '14 at 17:59
  • These are not custom properties; these are vendor extensions which are an entirely different concept from custom properties. – BoltClock Nov 24 '14 at 12:59