Resep Rahasia CSS Custom Properties

Sekitar tahun 2017 CSS Custom Properties atau bisa kita sebut CSS Variable mulai diperkenalkan. Saya adalah orang yang skeptis pada waktu itu dan tidak memulai untuk eksplorasi. Karena sudah merasa memiliki variabel di dalam preprocessor.

Tapi ternyata cukup banyak manfaat CSS Variable ini dalam developmen. Jadi, variabel dalam preprocessor itu adalah statis, tapi tidak untuk CSS Variable.

CSS Variable itu Dinamis

Statis yang dimaksud adalah kita tidak bisa mengubah nilai dari variabel dimanapun dan kapanpun. Seperti contoh di bawah perbandingan mendeklarasikan variabel.

Bagaimana variabel dideklarasi dalam SASS

$background: tomato;

.element {
    background: $background;
}

Hasil kompilasi

.element {
    background: tomato;
}

Bagaimana variabel dideklarasi dalam CSS

:root {
  --background: tomato
}

.element {
  background: var(--background);
}

Hasil kompilasi CSS Variable akan tetap sama dengan kode sumbernya. Untuk menggunakan nilai CSS Variable kita menyematkannya dengan menggunakan var() dalam properti CSS sebagai nilai. Di bawah akan saya coba tunjukan mengapa CSS Variable itu dinamis.

:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

.use-teal {
  --background: teal;
}

<div class="element">Tomato</div>
<div class="element  use-teal">Teal</div>

Dari contoh di atas maka .element akan memiliki background tomato dan .element .use-teal akan memiliki background teal. Jadi kita bisa mengubah nilai variabel dimanapun dan kapanpun.

Kita akan coba lanjut dengan beberapa cara menyematkan nilai variabel.

:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

<div class="element">Tomato</div>
<div class="element" style="--background: teal">Teal</div>

Dengan melihat cara saya menyematkan nilai variabel di atas. Berarti cara menyematkan sebuah nilai tidak hanya didominasi dengan mengubahnya dalam berkas CSS saja. Tetapi kita juga bisa mengubahnya melalui atribut HTML.

Mengubah Nilai Melalui JS

Kita pun bisa mengubah nilai variabel dengan menggunakan JS. Berikut adalah contoh penerapan bagaimana nilai sebuah variabel diubah melalui event JS.

:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

<div class="element">Hanya sebuah teks</div>
<button onclick="changeColor()">Ubah warna</button>

const changeColor = () => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  const el = document.querySelector('.element');
  el.style.setProperty('--background', '#' + randomColor);
}

Bersinergi dengan CSS Preprocessor

Dengan adanya variabel dalam CSS bukan berarti variabel yang telah dulu ada yang digunakan oleh preprocessor jadi kita tinggalkan. Kita masih dapat memanfaatkannya untuk nilai-nilai yang sifatnya statis.

Mencampur kedua jenis variabel tersebut masih sangat mungkin kita lakukan. Seperti contoh di bawah.

$button-sml = 1em;
$button-mid = 1.5em;

.btn {
  --button-size: #{$button-sml);

  font-size: var(--button-size);
}

@media screen and (min-width: 600px) {
  .btn {
    --button-size: #{$button-mid};
  }
}

Keterbatasan

Sebuah fitur selain ada kelebihan tentunya juga memiliki keterbatasan. Beberapa sintaks yang tidak dapat digunakan dengan CSS Variable.

:root{
  --min-width: 576px;
  --child-number: 3;
}

@media screen and (min-width: var(--min-width) ) {
  li:nth-child(var(--child-number)) {
    border-bottom: solid 2px teal;
  }
}