CSS

Mengenal CSS Variabel (CSS Custom Properties)

Pinterest LinkedIn Tumblr

CSS atau singkatan dari Cascading Style Sheets adalah sebuah pengatur struktur markup HTML yang berfungsi untuk memodifikasi tampilan element website agar bisa kita kostumasi baik itu dalam segi warna, tampilan, maupun merubah bentuk tampilan element webiste. Jika kita ibartkan halaman website sebagai sebuah sport car, maka HTML merupakan rangka mobilnya, lalu CSS meliputi body mobil, material interior, warna cat, dan Javascript adalah mesin dan ECU yang mengatur segala fungsi dari mobil tersebut.

Mengenal CSS Variabel (CSS Custom Properties)
Ullistrasi sport car (sumber)

Disini saya asumsikan kalian sudah familiar dengan penggunaan CSS dasar, dan saya akan lebih spesifik membahas salah satu element properti CSS yaitu CSS Variabel atau CSS Custom Properties. CSS Variabel adalah salah satu fungsi CSS yang dapat menyortir dan medefinisikan sebuah nilai/value CSS kedalam satu element properti tertentu.

Ketika kita akan membangun sebuah website dengan skala besar, kita akan sering mengulang sebuah nilai CSS berkali-kali, dan pada saat kita akan merevisi nilai tersebut akan cukup memakan waktu walaupun sebenarnya kita bisa menggantinya dengan fitur find and replace pada code editor.

Namun dalam kasus tertentu, mengganti sebuah nilai properti dengan menggunakan find and replace dapat berdampak buruk, karena mungkin saja kita ingin lebih spesifik untuk merubah nilai properti CSS tertentu dalam halaman website dan bukan merubahnya secara keseluruhan.

Sebagai contoh, kamu menggunakan warna primer #150485 pada halaman websitemu yang juga digunakan untuk beberapa element pendukung lainnya, dan kamu ingin merubahnya dengan kombinasi warna lain, maka yang terjadi semua properti yang memiliki nilai warna tersebut akan terganti, padahal kamu masih membutuhkan kombinasi warna yang sebelumnya pada beberapa element tertentu.

Dengan bantuan Variabel CSS kita dapat lebih leluasa mendefinisikan sebuah nilai properti CSS dalam satu tempat dan kita dapat memanggilnya kapanpun kita mau. Begitupun ketika kita ingin merubahnya, maka kita cukup mengganti properti utama dari element tersebut.

Cara Penggunaan

Kita dapat mendeklarasikan CSS Variabel dengan cara menuliskan nilai properti double strip (--) dan dilanjutkan dengan penamaan yang kita inginkan.

:root {
  --primary-color: #7579e7;
  --primary-bg-color: #fafafa;
}

Pada contoh diatas kita membuat CSS Variabel dengan properti (--primary-color) dan (--primary-bg-color) dengan nilainya masing-masing dengan menggunakan CSS psuedo-class (:root), dan hal ini merupakan best practice dalam menggunakan CSS Variabel, karena kita dapat mengimplementasikannya secara global pada halaman HTML kita.

Penggunaan CSS variabel sendiri bersifat case sensitive yang artinya satu properti yang sama dapat memiliki nilai yang berbeda walaupun penamaannya sama.

:root {
  --primary-color: #7579e7;
  /*  nilai properti di atas --primary-color
  berbeda dengan --Primary-Color */
  --Primary-Color: #213e3b;
}

Penggunaan --primary-color memiliki nilai yang berbeda dengan --Primary-Color , karena yang satu ditulis menggunakan karakter lowercase dan yang satu lagi ditulis dengan titilecase.

Untuk dapat memanggil nilai CSS Variabel ini kita tinggal menggunakan var() pada nilai properti yang kita inginkan.

.container {
  background-color: var(--primary-color);
}

Penggunaaan CSS Variabel juga berlaku untuk semua properti CSS seperti font-size, font-family, dan berbagai properti CSS lainnya.

:root {
   /* Color */
   --primary-color: #00d2a0;
   --secondary-color: #86868b;
   --accent-color: #eeeeee;
   --bg-color: #141414;

   /* Button Style */
   --btn-border: 2px;
   --btn-radius: 0.25rem;

   /* Typography */
   --font-family: 'Lato', sans-serif;
   --secondary-font-family: 'Roboto', sans-serif;
   --extra-big-font-size: 2.5rem;
   --big-font-size: 1.5rem;
   --medium-font-size: 1.2rem;
   --small-font-size: 1rem;
   --extra-small-font-size: 0.75rem;
}

CSS Variabel juga memiliki sifat inheritance, yang artinya properti ini akan mengambil nilai dari parent element jika tidak ada nilai yang terdapat pada sebuah element. Contoh pada halaman HTML di bawah;

<div class="satu">
 <div class="dua">
  <div class="tiga"></div>
   <div class="empat"></div>
 </div>
</div>

Dengan properti CSS;

.dua {
 --text-one: 14px;
}

.tiga {
 --text-two: 1rem;
}

Jika kalian perhatikan pada halaman HTML di atas, maka ada dua properti (class="dua") dan (class="tiga") yang memiliki nama yang sama, namun dengan nilai yang berbeda. Maka div dengan (class="dua") akan memiliki nilai 14px, dan div dengan (class="tiga") akan memiliki nilai 1rem, selanjutnya div dengan (class="empat") akan memiliki nilai 14px karena mengikuti element parent yang ada di atasnya (class="dua"). Sedangkan untuk div dengan (class="satu") tidak memiliki nilai atau invalid value yang mana ini adalah nilai default untuk semua properti custom.

Sekedar catataan, bahwa CSS Variabel ini berbeda cara kerjanya seperti variabel pada bahasa pemrograman Javascript, dimana nilai yang ada hanya akan dibaca saat digunakan dan tidak disimpan untuk digunakan pada fungsi yang lain seperti penggunaan fungsi variabel pada Javascript.

Nilai Fallback pada CSS Variabel

Properti CSS Variabel dapat memiliki nilai fallback atau nilai pengembali jika variabel yang digunakan tidak memiliki nilai yang di definisikan. Nilai argumen pertama adalah nilai utama yang digunakan jika di definisikan dengan benar, lalu argumen kedua akan berfungsi sebagai fallback jika nilai utama adalah invalid value (misal, penulisan nilai yang salah 14 px yang seharusnya tidak menggunakan spasi).

Fungsi fallback ini hanya dapat menampung dua parameter, dimana parameter pertama adalah nilai utama dan parameter kedua adalah nilai fallback. Jika nilai dari parameter kedua atau fallback memiliki invalid value maka fungsi fallback ini tidak akan berfungsi.

.section-one {
 /* Nilai fallback blue jika --my-color tidak di definisikan */
  color: var(--my-color, blue);
}

.section-two {
  /* Nilai fallback blueviolet jika --my-color dan --my-another-color
  tidak di definisikan */
  background-color: var(--my-color, var(--my-another-color, blueviolet)); 
}

.section-three {
  /* Invalid value untuk "--my-another-color, turquoise"
  karena memiliki nilai fallback lebih dari dua argumen */
  background-color: var(--my-color, --my-another-color, turquoise);
}

Cara penulisan CSS Variabel menggunakan fallback seperti tertera pada contoh di atas akan berpengaruh pada performa website karena akan menambah beban pada browser untuk dapat mengurai variabel pada dokumen CSS.

Jadi jika dirasa tidak perlu, maka penulisan fallback sebenarnya bukan hal yang wajib, karena hal tersebut tidak akan berpengaruh terhadap kompabilitas pada cross browser seperti penggunaan vendor prefix.

Apa yang terjadi jika kita salah menulisakan nilai CSS Variabel?

Ketika browser membaca nilai var() sebagai invalid value maka konsep inheritance akan berlaku untuk hal tersebut.

<h1>Hello World<h1>
:root { 
   --font-size: #0f3057;
} 

p { 
   color: blueviolet;
}

p { 
   font-size: var(--font-size);
}

Contoh penulisan CSS Variabel di atas menunjukan invalid value karena nilai var(--font-size) memiliki CSS root value yang salah. Jika hal tersebut terjadi, maka akan ada dua hal yang terjadi. Pertama, browser akan mengidentifikasi apakah <p> memiliki nilai inheritance pada dokumen HTML, jika tidak maka browser akan mengambil nilai default pada browser yaitu 16px.

Paragraph atau <p> tidak akan memiliki nilai blueviolet karena terdapat invalid value yang akan dikembalikan dengan nilai default dan tidak sama dengan konsep fallback, karena browser akan membacanya sebagai syntax error.

Penggunaan CSS Variabel pada Javascript sama halnya dengan penggunaan standar properti CSS pada umumnya.

// Mengambil variable inline style
element.style.getPropertyValue("--my-color");

// Mengambil semua variable --my-var darimanapun
getComputedStyle(element).getPropertyValue("--my-color");

// Menetapkan variable dari inline style
element.style.setProperty("--my-color", jsVar + 4);

Kesimpulan

Menggunakan CSS Variabel akan sangat membantu kita dalam mengelola website dalam skala besar, karena akan memudahkan kita ketika ingin mengganti nilai yang sudah kita tetapkan pada nilai variabel utama dan mengurangi risiko untuk merusak struktur CSS yang sudah kita buat.

CSS Variabel juga membantu kita untuk memetakan penggunaan CSS dengan lebih rapih untuk pengembangan webiste dan menambah nilai lebih untuk standar penulisan yang semantic.

Jangan lupa share artikel ini agar dapat memberikan manfaat dan informasi kepada teman dan sahabatmu di luar sana, akhir kata saya ucapkan terima kasih dan sampai jumpa di artikel lainnya, hanya di BackslashID ?

Hallo kawan-kawan semua nama saya Dwi Priyatmoko, content creator sekaligus co-founder blog BackslashID. Saya seorang Web Designer yang juga menyukai ilmu seputar User Experience. Diluar kegiatan ngoding dan desain, saya hobi melakukan olahraga outdor taril run dan juga bermain game mobile. Kebetulan saat ini juga tertarik pada custom mechanical keyboard.

Write A Comment