CSS [Explication détaillée] Propriétés personnalisées (également appelées variables CSS)

2024-07-12

Déclarer des variables - -

Règles de dénomination des variables

Prise en charge de la dénomination numérique
Prend en charge la dénomination à l'aide de tirets et d'espaces
Prend en charge les textes chinois et autres textes CJK
Les noms contenant des caractères spéciaux tels que $, [,], ^, (,), %, ", etc. ne sont pas pris en charge. Pour utiliser ces caractères spéciaux, vous devez utiliser l'échappement par barre oblique inverse.

variable

Peut être n'importe quelle valeur ouexpression

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

portée variable

Les éléments descendants peuvent hériter du CSS défini par les éléments ancêtres sans modification.Propriétés personnaliséesvaleur.

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

variables globales

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

Caractéristiques des variables

Les valeurs des variables peuvent être transmises les unes aux autres

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

les variables CSS ne peuvent pas s'attribuer de valeurs

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

les variables CSS ne peuvent pas être utilisées comme valeur de la fonctionnalité média @media

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

Les variables CSS en tant que valeurs de propriété de contenu n'ont aucun effet

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

Utiliser la variable var()

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

deepskyblue estValeur par défaut, utilisez deepskyblue lorsque –any-what n'est pas valide

Lorsque le paramètre de la fonction var() est illégal

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

La couleur d'arrière-plan finale du corps est transparente, car la valeur initiale de background-color est transparente

Tant que la première valeur du paramètre de la fonction var() est valide, même si la valeur du paramètre est en désordre, elle sera toujours analysée normalement. Si la valeur du premier paramètre est illégale, la fonction var() résout la valeur initiale ou la valeur héritée de la propriété CSS actuelle (s'il y a héritage), c'est-à-dire qu'elle est rendue selon les règles du mot-clé global unset. (Notez que les règles de rendu sont similaires et ne sont pas équivalentes à la définition directe du mot-clé unset.)

Fonctionnalité d'espaces de fin de la fonction 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 taille de police du corps final est de 14 px.

Principe : ici font-size:var(–size)px est équivalent à font-size:20 px. Notez qu'il y a un espace après 20, ce qui est une valeur d'attribut font-size illégale. Puisque var(-size)px est grammaticalement légal, font-size:16px sera réinitialisé et la taille de police 14px définie par l'élément parent sera éventuellement utilisée.

Le plan d'amélioration est le suivant :

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 obtient la valeur de la variable 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 modifie la valeur des variables globales CSS

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

js définit la valeur des variables locales CSS

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

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

Exemples pratiques

Afficher la valeur de la variable CSS dans la page à l'aide du compteur CSS

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

barre de progression

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

images svg utilisées à plusieurs endroits

: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

Voir l'effet https://demo.cssworld.cn/new/8/1-3.php

Effets de clic sur un bouton

Voir l'effet 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

Principe de mise en œuvre

Il y a un espace devant –open:;, c'est-à-dire que la valeur de l'attribut –open est un espace qui peut être syntaxiquement valide.Mais les espaces ne sont pas valides pour les propriétés CSS telles que box-shadow et background. Par conséquent, les propriétés CSS telles que box-shadow et background sont résolues aux valeurs initiales.
Après avoir cliqué sur le bouton pour déclencher la pseudo-classe :active, l'instruction CSS –open:inherit sera exécutée. Le mot-clé CSS global doit être invalide en tant que valeur d'attribut personnalisé CSS, donc la fonction var() utilisera l'attribut CSS de sauvegarde. valeur pour le rendu.

Mot-clé de fonction CSS personnalisé()

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

Simuler la fonction attr()

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

Partage de technologie