What do these CSS properties do with a double type prefix?

Question

I met this weird CSS code here :

:root {
    --color-link: #04b;
    --color-link-visited: #551a8b;
    --color-link-minor: #669;
    --color-black: #000;
    --color-grey: #999;
    --font-thin: HelveticaNeue-thin,sans-serif-thin;
    --font-light: HelveticaNeue-Light,sans-serif-light;
    --text-s: 11px;
    --text-s-line-s: 1em;
    --text-s-line-m: 1em;
    --typo-caps: 11px;
    --typo-greenurl: 13px;
}

I have never seen such CSS property names before and cannot find information about them. But browser inspectors (tested it in Chrome, Safari, and Firefox) say they are valid CSS properties, so it should be a CSS standard.

I tried to add my own property, and it really is:

:root {
    --color-foobar: #000;
}

What do these properties do? What does the CSS standard describe? Where can I find the link?

Answer 1

A double leading dash is used to define custom properties. See link below http://dev.w3.org/csswg/css-variables/

Example from W3C:

    :root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}