CSS [Detaillierte Erklärung] Benutzerdefinierte Eigenschaften (auch als CSS-Variablen bekannt)

CSS [Detaillierte Erklärung] Benutzerdefinierte Eigenschaften (auch als CSS-Variablen bezeichnet)

2024-07-12

Variablen deklarieren - -

Regeln für die Benennung von Variablen

Unterstützt numerische Benennung
Unterstützt die Benennung mit Bindestrichen und Leerzeichen
Unterstützt chinesische und andere CJK-Texte
Namen, die Sonderzeichen wie $, [,], ^, (,), %, " usw. enthalten, werden nicht unterstützt. Um diese Sonderzeichen zu verwenden, müssen Sie Backslash-Escape verwenden.

Variable

Kann ein beliebiger Wert sein oderAusdruck

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

Variablenbereich

Nachkommende Elemente können das von Vorgängerelementen festgelegte CSS unverändert erben.Benutzerdefinierte EigenschaftenWert.

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

globale Variablen

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

Eigenschaften von Variablen

Variablenwerte können aneinander übergeben werden

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

CSS-Variablen können sich selbst keine Werte zuweisen

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

CSS-Variablen können nicht als Wert der @media-Medienfunktion verwendet werden

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

CSS-Variablen als Inhaltseigenschaftswerte haben keine Auswirkung

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

Verwenden Sie die Variable var()

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

deepskyblue istStandardwert, verwenden Sie deepskyblue, wenn –any-what ungültig ist

Wenn der Funktionsparameter var() unzulässig ist

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

Die endgültige Hintergrundfarbe des Körpers ist transparent, da der Anfangswert der Hintergrundfarbe transparent ist

Solange der erste Parameterwert der Funktion var() gültig ist, wird er auch dann normal analysiert, wenn der Parameterwert durcheinander ist. Wenn der erste Parameterwert unzulässig ist, löst die Funktion var() den Anfangswert oder den geerbten Wert der aktuellen CSS-Eigenschaft auf (falls eine Vererbung vorliegt), d. h. sie wird gemäß den Regeln des unset globalen Schlüsselworts gerendert. (Beachten Sie, dass die Rendering-Regeln ähnlich sind und nicht dem direkten Festlegen des Schlüsselworts unset entsprechen.)

Nachgestellte Leerzeichenfunktion der Funktion var()

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

Die endgültige Schriftgröße für den Text beträgt 14 Pixel

Prinzip: Hier entspricht „font-size:var(–size)px“ „font-size:20 px“. Beachten Sie, dass nach 20 ein Leerzeichen steht, was ein unzulässiger Wert für das Attribut „font-size“ ist. Da var(-size)px grammatikalisch zulässig ist, wird „font-size:16px“ zurückgesetzt und schließlich die vom übergeordneten Element festgelegte Schriftgröße 14px verwendet.

Der Verbesserungsplan lautet:

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

oder

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

js ruft den Wert der globalen CSS-Variablen ab

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 ändern den Wert globaler CSS-Variablen

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

js legt den Wert lokaler CSS-Variablen fest

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

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

Praxisbeispiele

Zeigen Sie den Wert der CSS-Variablen auf der Seite mithilfe des CSS-Zählers an

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

Fortschrittsanzeige

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

SVG-Bilder, die an mehreren Stellen verwendet werden

: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

Sehen Sie den Effekt https://demo.cssworld.cn/new/8/1-3.php

Schaltflächenklickeffekte

Sehen Sie den Effekt 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

Umsetzungsprinzip

Vor –open:; steht ein Leerzeichen, das heißt, der Attributwert –open ist ein Leerzeichen, das syntaktisch gültig sein kann.Für CSS-Eigenschaften wie „box-shadow“ und „background“ sind Leerzeichen jedoch ungültig. Daher werden CSS-Eigenschaften wie „box-shadow“ und „background“ in Anfangswerte aufgelöst.
Nachdem Sie auf die Schaltfläche zum Auslösen der :active-Pseudoklasse geklickt haben, wird die CSS-Anweisung –open:inherit ausgeführt. Das globale CSS-Schlüsselwort muss als benutzerdefinierter CSS-Attributwert ungültig sein, damit die Funktion var() das Backup-CSS-Attribut verwendet Wert für die Darstellung.

Benutzerdefinierte CSS-Funktion keyword()

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

Simulieren Sie die Funktion attr()

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

Technologieaustausch