Do Custom CSS Properties Use One Leading Dash or Two

What do these double-dash-prefixed CSS properties do?

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);
}

What are these CSS properties that start with a double-hyphen?

These properties are CSS Variables. You can see more on CSS variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Here's an example of how to access CSS variables:

element {
background-color: var(--main-bg-color);
}

The reason they are in something called root: The :root selector allows you to target the highest-level "parent" element in the DOM, or document tree.

What do leading hyphens mean in CSS?

They are vendor specific CSS properties.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover; /* WEBKIT - Chrome, Safari */
  -moz-background-size: cover; /* MOZILLA - Firefox */
  -o-background-size: cover; /* OPERA */
  background-size: cover;
}

Hypens are used to introduce vendor specific CSS properties, which are used by the browsers but not yet recognized as standard for CSS.

Prefixes often used in CSS are:

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

what does this code snippet do and is it css?

The -- refers to a CSS variable. The entire definition

--slice-0: inset(50% 50% 50% 50%)

is a shorthand for top, right, bottom and / or left see here. It defines the physical offset of an element relative to its parent component.

Also check CSS custom properties (CSS variables).

---

Related Topics