87

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?

Finesse
  • 9,793
  • 7
  • 62
  • 92

1 Answers1

98

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);
}
Richie Bendall
  • 7,738
  • 4
  • 38
  • 58
Farhad
  • 1,873
  • 17
  • 28
  • 10
    ... basically like an scss $variable, except, that it doesn't get resolved at sass transpilation but truly client-side in the browser. – Frank N Feb 13 '20 at 08:38
  • 1
    Let's be aware, that chrome and edge supports this, [but not IE11](https://caniuse.com/#feat=css-variables) – Frank N Feb 13 '20 at 08:38
  • 24
    @FrankNocke To be honest I do not consider IE as browser :) – Farhad Jun 09 '20 at 07:51
  • @Farhad 1% of market share isn't a joke for some companies – Finesse Dec 19 '20 at 07:55
  • 9
    @Finesse I care about 99% – Farhad Dec 19 '20 at 21:00
  • 1
    @Finesse for very few companies, with huge budgets and large teams of developers, creating a lot of in-house libraries. And if, for some reason, you encounter small budget company caring about IE, they have bad management and are milking you out. The rest of the world should not bother. Stop reanimating the corpse – metalim May 13 '23 at 09:28
  • 1
    @metalim Much time has passed, today your comment is true – Finesse May 14 '23 at 11:26