CSS [explicação detalhada] Propriedades personalizadas (também conhecidas como variáveis CSS)

2024-07-12

Declarar variáveis - -

Regras de nomenclatura de variáveis

Suporte para nomenclatura numérica
Suporta nomeação usando travessões e espaços
Suporta textos chineses e outros textos CJK
Nomes contendo caracteres especiais como $, [,], ^, (,), %, ", etc. não são suportados. Para usar esses caracteres especiais, você precisa usar escape de barra invertida.

variável

Pode ser qualquer valor ouexpressão

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

escopo variável

Os elementos descendentes podem herdar o CSS definido pelos elementos ancestrais inalterados.Propriedades personalizadasvalor.

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

variáveis globais

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

Características das variáveis

Valores de variáveis podem ser passados entre si

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

variáveis css não podem atribuir valores a si mesmas

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

variáveis css não podem ser usadas como valor do recurso de mídia @media

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

Variáveis CSS como valores de propriedade de conteúdo não têm efeito

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

Use a variável var()

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

céu profundo é azulValor padrão, use deepskyblue quando –any-what for inválido

Quando o parâmetro da função var() é ilegal

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

A cor de fundo final do corpo é transparente, porque o valor inicial da cor de fundo é transparente

Contanto que o primeiro valor do parâmetro da função var() seja válido, mesmo que o valor do parâmetro seja uma bagunça, ele ainda será analisado normalmente. Se o valor do primeiro parâmetro for ilegal, a função var() resolve para o valor inicial ou valor herdado da propriedade CSS atual (se houver herança), ou seja, é renderizada de acordo com as regras da palavra-chave global não definida. (Observe que as regras de renderização são semelhantes e não equivalem à definição direta da palavra-chave unset.)

Recurso de espaços à direita da função var()

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

O tamanho final da fonte do corpo é 14px

Princípio: Aqui font-size:var(–size)px é equivalente a font-size:20 px Observe que há um espaço após 20, que é um valor de atributo font-size ilegal. Como var(-size)px é gramaticalmente legal, font-size:16px será redefinido e o tamanho da fonte 14px definido pelo elemento pai será eventualmente usado.

O plano de melhoria é:

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 obtém o valor da variável global 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 o valor das variáveis globais CSS

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

js define o valor das variáveis locais CSS

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

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

Exemplos práticos

Exiba o valor da variável CSS na página com a ajuda do contador CSS

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

Barra de progresso

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

imagens SVG usadas em vários lugares

: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

Veja o efeito https://demo.cssworld.cn/new/8/1-3.php

Efeitos de clique de botão

Veja o efeito 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

Princípio de implementação

Há um espaço na frente de –open:;, ou seja, o valor do atributo –open é um espaço, que pode ser sintaticamente válido.Mas os espaços são inválidos para propriedades CSS como box-shadow e background. Portanto, propriedades CSS como box-shadow e background são resolvidas para valores iniciais.
Após clicar no botão para acionar a pseudoclasse :active, a instrução CSS –open:inherit será executada. A palavra-chave CSS global deve ser inválida como um valor de atributo personalizado CSS, portanto a função var() usará o atributo CSS de backup. valor para renderização.

Palavra-chave de função CSS personalizada()

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

Simular função attr()

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

Compartilhamento de tecnologia