CSS [Penjelasan mendetail] Properti khusus (juga dikenal sebagai variabel CSS)

2024-07-12

Mendeklarasikan variabel - -

Aturan penamaan variabel

Mendukung penamaan numerik
Mendukung penamaan dengan tanda hubung dan spasi
Mendukung teks CJK berbahasa Mandarin dan lainnya
Nama yang mengandung karakter khusus seperti $, [,], ^, (,), %, ", dll. tidak didukung. Untuk menggunakan karakter khusus ini, Anda perlu menggunakan escape backslash.

variabel

Bisa berupa nilai apa pun atauekspresi

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

ruang lingkup variabel

Elemen turunan dapat mewarisi set CSS oleh elemen leluhur tanpa perubahan.Properti khususnilai.

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

variabel global

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

Karakteristik variabel

Nilai variabel dapat diteruskan satu sama lain

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

Variabel css tidak dapat memberikan nilai pada dirinya sendiri

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

Variabel css tidak dapat digunakan sebagai nilai fitur @media media

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

Variabel CSS sebagai nilai properti konten tidak berpengaruh

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

Gunakan variabel var()

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

deepskyblue adalahNilai bawaan, gunakan deepskyblue ketika –apa pun tidak valid

Ketika parameter fungsi var() ilegal

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

Warna latar belakang akhir badan adalah transparan karena nilai awal warna latar belakang transparan

Selama nilai parameter pertama dari fungsi var() valid, meskipun nilai parameternya berantakan, nilai parameter tersebut akan tetap diurai secara normal. Jika nilai parameter pertama ilegal, fungsi var() akan menentukan nilai awal atau nilai yang diwarisi dari properti CSS saat ini (jika ada warisan), yaitu, dirender sesuai dengan aturan kata kunci global yang tidak disetel. (Perhatikan bahwa aturan rendering serupa dan tidak setara dengan menyetel langsung kata kunci yang tidak disetel.)

Fitur spasi tambahan dari fungsi var()

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

Ukuran font badan akhir adalah 14px

Prinsip: Di sini font-size:var(–size)px setara dengan font-size:20 px. Perhatikan bahwa ada spasi setelah 20, yang merupakan nilai atribut font-size ilegal. Karena var(-size)px secara tata bahasa sah, font-size:16px akan disetel ulang, dan ukuran font yang ditetapkan oleh elemen induk 14px pada akhirnya akan digunakan.

Rencana perbaikannya adalah:

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

atau

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

js mendapatkan nilai variabel 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 mengubah nilai variabel global CSS

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

js menetapkan nilai variabel lokal CSS

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

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

Contoh praktis

Tampilkan nilai variabel CSS di halaman dengan bantuan penghitung CSS

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

bilah kemajuan

https://blog.csdn.net/weixin_41192489/artikel/detail/121007837

gambar svg digunakan di banyak tempat

: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

Lihat efeknya https://demo.cssworld.cn/baru/8/1-3.php

Efek klik tombol

Lihat efeknya https://demo.cssworld.cn/baru/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

Prinsip implementasi

Ada spasi di depan –open:;, yaitu nilai atribut –open adalah spasi, yang mungkin valid secara sintaksis.Namun spasi tidak valid untuk properti CSS seperti box-shadow dan background. Oleh karena itu, properti CSS seperti box-shadow dan background diselesaikan ke nilai awal.
Setelah mengklik tombol untuk memicu :active pseudo-class, pernyataan CSS –open:inherit akan dijalankan. Kata kunci CSS global harus tidak valid sebagai nilai atribut khusus CSS, sehingga fungsi var() akan menggunakan atribut CSS cadangan nilai untuk rendering.

Kata kunci fungsi CSS khusus()

https://blog.csdn.net/weixin_41192489/artikel/detail/121021277

Simulasikan fungsi attr()

https://blog.csdn.net/weixin_41192489/artikel/detail/121022170

Berbagi teknologi