What do these double-dash-prefixed CSS properties do? [duplicate]

Question

I met this strange 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've never seen such CSS properties names before and can't find information about them. But browser inspectors (checked it in Chrome, Safari and Firefox) say they are valid CSS properties, so it must be a CSS standard.

I tried to add my own property and it is valid either:

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

What do these properties do? What the CSS standard describes it? Where can I find a reference about it?

Answer 1

A double leading dash is used for defining custom properties. For more information, check out this W3C Spec page.

Example from W3C:

:root {   --main-color: #05c;   --accent-color: #056; }  #foo h1 {   color: var(--main-color); }