Rekomendasi kursus:

Fungsi CSS var()

Definisi dan penggunaan CSS var() Fungsi untuk memasukkan nilai variabel CSS.

Contoh

Contoh 1

Pertama, deklarasikan variabel global bernama --main-bg-color, kemudian gunakan di tabel gaya var() Fungsi untuk memasukkan nilai variabel:

:root {
  --main-bg-color: korral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Coba sendiri

Contoh 2

Penggunaan lain var() Contoh penggunaan beberapa nilai variabel CSS: var()

:root {
  --main-bg-color: korral;
  --main-txt-color: biru;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Coba sendiri

Syarat CSS

var(--name, value)
Nilai Deskripsi
--name Diperlukan. Nama variabel (harus dimulai dengan dua tanda hubung).
value Pilihan. Nilai cadangan (jika variabel tidak ditemukan).

Detil teknis

Versi: CSS3

Dukungan browser

Angka di tabel menunjukkan versi browser yang sepenuhnya mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
49 15 31 9.1 36

Halaman yang berhubungan

Panduan:Variabel CSS