Variabel CSS: Custom Property, :root dan var()

Mendeklarasikan dan memakai variabel CSS

Variabel CSS, yang secara resmi disebut custom property, adalah property yang namanya diawali --. Deklarasikan sekali, biasanya di :root supaya seluruh halaman mewarisinya, lalu baca di mana saja dengan var().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS variables</title>
  <style>
    :root {
      --brand: #2563eb;
      --radius: 8px;
      --space: 12px;
    }

    .btn {
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius);
      padding: var(--space) calc(var(--space) * 2);
    }

    .card {
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: var(--space);
      margin-bottom: var(--space);
    }
  </style>
</head>
<body>
  <div class="card">Change --brand in :root and both change.</div>
  <button class="btn">Button</button>
</body>
</html>

Ubah --brand menjadi #16a34a, maka border kartu dan tombolnya berubah bersamaan. Itulah intinya: satu nilai, satu tempat untuk mengubahnya. Variabel juga bisa digabungkan dengan calc(), seperti yang ditunjukkan padding samping tombol itu.

Sintaks

:root {
  --name: value;         /* declare */
}

.element {
  color: var(--name);                 /* use */
  color: var(--name, #111827);        /* use, with a fallback */
  padding: calc(var(--space) * 2);    /* compute with it */
}

:root cocok dengan elemen <html>. Selector ini dipakai sebagai ganti html karena specificity-nya setara class, dan berdasarkan kebiasaan, selector ini menandakan "pengaturan global".

Cakupan: menimpa variabel per komponen

Karena variabel diwariskan, mendeklarasikan ulang sebuah variabel di sebuah elemen akan mengubahnya untuk elemen itu dan semua yang ada di dalamnya. Aturan yang memakai variabel itu tetap sama.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scope</title>
  <style>
    :root { --accent: #2563eb; }

    .alert {
      border-inline-start: 6px solid var(--accent);
      background: #e5e7eb;
      color: #111827;
      padding: 10px 14px;
      margin-bottom: 8px;
    }

    .alert.success { --accent: #16a34a; }
    .alert.warning { --accent: #f59e0b; }
  </style>
</head>
<body>
  <div class="alert">Info uses the global blue.</div>
  <div class="alert success">Success overrides --accent.</div>
  <div class="alert warning">Warning overrides it too.</div>
</body>
</html>

Varian-varian itu hanya mengatur sebuah variabel, tidak pernah mengatur border-nya langsung. Menambahkan varian keempat cukup satu baris.

Nilai cadangan

var(--name, fallback) memakai nilai cadangan saat variabelnya tidak didefinisikan di elemen itu atau di ancestor mana pun. Semua yang ada setelah koma pertama adalah nilai cadangan, jadi nilai itu sendiri boleh berisi koma (var(--font, Georgia, serif)), dan bisa berupa var() lain.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fallback</title>
  <style>
    p { padding: 8px; color: white; }
    .a { background: var(--missing, #16a34a); }
    .b { --defined: #2563eb; background: var(--defined, #16a34a); }
    .c { background: var(--missing, var(--also-missing, #f59e0b)); }
  </style>
</head>
<body>
  <p class="a">Green: --missing is not defined, fallback used.</p>
  <p class="b">Blue: --defined exists, fallback ignored.</p>
  <p class="c">Amber: nested fallback.</p>
</body>
</html>

Mengubah variabel dengan JavaScript: tombol ganti tema

JavaScript bisa mengatur variabel di elemen mana pun dengan style.setProperty(). Atur di document.documentElement (elemen <html>), maka seluruh halaman ikut berubah. Pola yang lebih umum adalah mengaktifkan dan menonaktifkan class yang mendefinisikan ulang variabelnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827;
      --muted: #e5e7eb;
    }
    .dark {
      --bg: #111827;
      --text: #f9fafb;
      --muted: #374151;
    }
    body { background: var(--bg); color: var(--text); padding: 12px; }
    .panel { background: var(--muted); padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="panel">
    <p>Theme colors come from three variables.</p>
    <button id="toggle">Toggle dark mode</button>
    <button id="brand">Random text color</button>
  </div>
  <script>
    const root = document.documentElement;
    document.getElementById('toggle').onclick = () => root.classList.toggle('dark');
    document.getElementById('brand').onclick = () => {
      const hue = Math.floor(Math.random() * 360);
      root.style.setProperty('--text', `hsl(${hue} 70% 40%)`);
      console.log(getComputedStyle(root).getPropertyValue('--text'));
    };
  </script>
</body>
</html>

Baca kembali sebuah variabel dengan getComputedStyle(element).getPropertyValue('--text'). Perhatikan bahwa setProperty menulis inline style di <html>, yang mengalahkan class .dark, jadi setelah tombol kedua ditekan, warna teksnya tetap sama di kedua tema sampai nilai inline itu dihapus dengan root.style.removeProperty('--text').

Mengirim nilai dari HTML

Variabel di atribut style adalah cara paling rapi untuk memberikan data per elemen ke stylesheet. Desainnya tetap di CSS, dan HTML hanya memberikan sebuah angka.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bars</title>
  <style>
    .bar {
      width: calc(var(--value) * 1%);
      box-sizing: border-box;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="bar" style="--value: 30">30</div>
  <div class="bar" style="--value: 65">65</div>
  <div class="bar" style="--value: 90">90</div>
</body>
</html>

calc(var(--value) * 1%) mengubah angka biasa menjadi persentase. Variabel juga bisa berubah di dalam media query: @media (min-width: 900px) { :root { --space: 20px; } } membuat setiap jarak yang membaca --space membesar di layar lebar.

Jebakan nilai yang tidak valid

Browser tidak bisa tahu sebelumnya apakah sebuah variabel berisi nilai yang valid untuk property yang memakainya. Kalau ternyata tidak valid, property itu tidak kembali ke deklarasi sebelumnya di aturan tersebut. Property itu menjadi invalid at computed-value time dan berperilaku seolah-olah diatur ke unset: property yang diwariskan mengambil nilai elemen induk, sedangkan yang lain mengambil nilai awalnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalid value</title>
  <style>
    :root { --size: red; } /* not a length */
    .box {
      background: #e5e7eb;
      padding: 12px;
      font-size: 24px;
      font-size: var(--size); /* invalid: 24px is NOT kept */
      border: 4px solid #f59e0b;
      border-width: var(--missing); /* undefined, no fallback */
    }
  </style>
</head>
<body>
  <div class="box">16px text and a 3px border, not 24px and 4px.</div>
</body>
</html>

Teksnya mewarisi 16px dari <body>, dan border-width kembali ke nilai awalnya, medium, yang digambar browser sebagai 3px. Tanpa variabel, deklarasi yang tidak valid dibuang dan deklarasi sebelumnya tetap berlaku. Dengan variabel, sudah terlambat untuk itu. Nilai cadangan tidak membantu saat variabelnya didefinisikan tetapi salah: nilai cadangan hanya untuk variabel yang tidak didefinisikan.

Variabel CSS vs variabel Sass

Keduanya bisa bekerja sama: banyak proyek memakai Sass untuk logika saat build dan menghasilkan variabel CSS untuk apa pun yang bisa diganti temanya.

Kesalahan yang sering terjadi

• Lupa dua tanda hubung. var(brand) dan --brand yang dideklarasikan sebagai -brand tidak berfungsi.
• Memakai variabel di media query. @media (min-width: var(--bp)) tidak valid. Kondisi media butuh nilai literal.
• Mengira deklarasi sebelumnya tetap berlaku saat variabelnya tidak valid. Tidak begitu, lihat jebakan di atas.
• Mencampur satuan dengan cara yang salah. --gap: 10; lalu margin: var(--gap)px tidak menghasilkan 10px. Pakai calc(var(--gap) * 1px) atau simpan 10px.
• Mendeklarasikan di elemen yang salah. Variabel yang dideklarasikan di .card tidak terlihat oleh saudara atau elemen induknya. Deklarasikan nilai bersama di :root.