CSS [Detailed Explanation] Custom Properties (aka CSS Variables)

2024-07-12

Declare variables -

Variable naming conventions

Support digital naming
Supports hyphens and spaces in naming
Support Chinese and other CJK characters
Naming that contains special characters such as $, [, ], ^, (,), %, and " is not supported. To use these special characters, you need to use a backslash escape.

variable

Can be any value orexpression

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
1
2
3
4

Variable Scope

Descendant elements can inherit the CSS set by ancestor elements intactCustom propertiesvalue.

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
1
2
3
4
5
6

Global variables

:root {
  --borderColor: #ccc;
}
1
2
3

Characteristics of variables

Variable values can be passed to each other

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
1
2
3
4

CSS variables cannot assign values to themselves

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
1
2

CSS variables cannot be used in the value of @media media feature

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
1
2
3
4
5

CSS variables have no effect as content property values

/* 无效 */
.bar::before {
    content: var(--percent);
}
1
2
3
4

Using variables var()

p {  
   background-color: var(--any-what, deepskyblue); 
}
1
2
3

deepskyblueDefault value, use deepskyblue when --any-what is invalid

When the var() function parameter is illegal

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
1
2
3
4
5

Finally, the background color of body is transparent, because the initial value of background-color is transparent.

As long as the first parameter value of the var() function is valid, even if the parameter value is a mess, it will still be parsed normally. If the first parameter value is illegal, the var() function will parse it as the initial value or inherited value of the current CSS property (if there is inheritance), that is, it will be rendered according to the rules of the unset global keyword. (Note that only the rendering rules are similar, which is not equivalent to directly setting the unset keyword.)

Trailing Space Behavior of var() Function

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
1
2
3
4
5
6
7
8

The final font-size of the body is 14px

Principle: Here, font-size:var(–size)px is equivalent to font-size:20px. Note that there is a space after 20, which is an illegal font-size attribute value. Since var(–size)px is legal in terms of syntax, font-size:16px will be reset, and the font size set by the parent element, 14px, will be used.

The improvement plan is:

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
1
2
3
4

body {
    --size: 20px;   
    font-size: var(--size);
}
1
2
3
4

js gets the value of CSS global variables

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
1

// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
1
2
3
4

js modifies the value of CSS global variables

document.documentElement.style.setProperty("--borderColor","green");
1

js sets the value of CSS local variables

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
1
2
3

box.style.setProperty('--color', 'deepskyblue');
1

Practical examples

Display the value of CSS variables in the page with CSS counter

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
1
2
3
4
5

progress bar

https://blog.csdn.net/weixin_41192489/article/details/121007837

SVG images used in multiple places

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

See the effect https://demo.cssworld.cn/new/8/1-3.php

Button click effects

See the effect https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Implementation principle

There is a space in front of –open:;, that is, the –open attribute value is a space, which is grammatically valid. However, spaces are invalid for CSS properties such as box-shadow and background. Therefore, CSS properties such as box-shadow and background are parsed as initial values.
After clicking the button to trigger the :active pseudo-class, the –open:inherit CSS declaration will be run. The global CSS keyword must be invalid as a CSS custom property value, so the var() function will use the backup CSS property value for rendering.

Custom CSS function keyword()

https://blog.csdn.net/weixin_41192489/article/details/121021277

Simulating the attr() function

https://blog.csdn.net/weixin_41192489/article/details/121022170

Technology Sharing