CSS [Spiegazione dettagliata] Proprietà personalizzate (note anche come variabili CSS)

2024-07-12

Dichiara variabili - -

Regole di denominazione delle variabili

Supporta la denominazione numerica
Supporta la denominazione utilizzando trattini e spazi
Supporta testi cinesi e altri testi CJK
I nomi contenenti caratteri speciali come $, [,], ^, (,), %, ", ecc. non sono supportati. Per utilizzare questi caratteri speciali, è necessario utilizzare la barra rovesciata.

variabile

Può essere qualsiasi valore oespressione

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

portata variabile

Gli elementi discendenti possono ereditare invariati il CSS impostato dagli elementi antenati.Proprietà personalizzatevalore.

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

variabili globali

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

Caratteristiche delle variabili

I valori variabili possono essere passati l'uno all'altro

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

le variabili css non possono assegnare valori a se stesse

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

Le variabili css non possono essere utilizzate come valore della funzione multimediale @media

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

Le variabili CSS come valori delle proprietà del contenuto non hanno alcun effetto

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

Usa la variabile var()

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

deepskyblue èValore di default, usa deepskyblue quando –any-what non è valido

Quando il parametro della funzione var() è illegale

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

Il colore di sfondo finale del corpo è trasparente, poiché il valore iniziale di background-color è trasparente

Finché il primo valore del parametro della funzione var() è valido, anche se il valore del parametro è confuso, verrà comunque analizzato normalmente. Se il valore del primo parametro è illegale, la funzione var() si risolve nel valore iniziale o nel valore ereditato della proprietà CSS corrente (se esiste ereditarietà), ovvero viene renderizzata secondo le regole della parola chiave globale unset. (Nota che le regole di rendering sono simili e non equivalgono all'impostazione diretta della parola chiave unset.)

Funzionalità degli spazi finali della funzione var()

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

La dimensione del carattere del corpo finale è 14px

Principio: qui font-size:var(–size)px è equivalente a font-size:20 px. Nota che c'è uno spazio dopo 20, che è un valore dell'attributo font-size non valido. Poiché var(-size)px è grammaticalmente legale, font-size:16px verrà reimpostato e alla fine verrà utilizzata la dimensione del carattere 14px impostata dall'elemento genitore.

Il piano di miglioramento è:

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 ottiene il valore della variabile globale CSS

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 modifica il valore delle variabili globali CSS

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

js imposta il valore delle variabili locali CSS

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

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

Esempi pratici

Visualizza il valore della variabile CSS nella pagina con l'aiuto del contatore CSS

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

barra di avanzamento

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

immagini SVG utilizzate in più posti

: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

Guarda l'effetto https://demo.cssworld.cn/new/8/1-3.php

Effetti del clic sui pulsanti

Guarda l'effetto 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

Principio di attuazione

C'è uno spazio davanti a –open:;, ovvero il valore dell'attributo –open è uno spazio, che può essere sintatticamente valido.Ma gli spazi non sono validi per le proprietà CSS come box-shadow e background Pertanto, le proprietà CSS come box-shadow e background vengono risolte sui valori iniziali.
Dopo aver fatto clic sul pulsante per attivare la pseudo-classe :active, verrà eseguita l'istruzione CSS –open:inherit. La parola chiave CSS globale non deve essere valida come valore dell'attributo personalizzato CSS, quindi la funzione var() utilizzerà l'attributo CSS di backup. valore per il rendering.

Parola chiave funzione CSS personalizzata()

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

Simula la funzione attr()

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

Condivisione della tecnologia