-1

In our compony we use ant design library. And when I added one of the components from the library to my project and I looked in Chrome DevTools I was amused that I found a property that called --antd-arrow-background-color: none;

Before I thought that all browsers can understand and show only properties from W3C standard that is from this list https://www.w3schools.com/cssref/index.php But how is possible that my browser (Chrome) understans other properties? For example properties that have antd prefix?

Can anybody explain me this?

PS I know that there are vendor prefixes but there is no such prefix as antd among of them.

Gleb Krylov
  • 65
  • 4
  • 2
    [CSS variables/custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) – kelsny Nov 18 '22 at 17:27

2 Answers2

1

They are Custom Properties: CSS variables

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

Example Usage:

:root {
  --color-primary: #6610f2;
  --color-secondary: #f8f9fa;
}

.primary-text {
  color: var(--color-secondary);
  background-color: var(--color-primary);
}
<div class="primary-text">Hello World</div>

:root in HTML represents <html> element

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element and is identical to the selector html, except that its specificity is higher.

naveen
  • 53,448
  • 46
  • 161
  • 251
1

They are custom properties that work like variables and can be used like this:

:root{
    /* Property starts with "--" */
    --color-blue: #0000FF; 
}

body{
    /* Can be used with: var() */
    color: var(--color-blue); 
}

More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Ere Männistö
  • 518
  • 2
  • 20