CSS

Variabel di CSS: Cara Membuat dan Contoh Codenya

Properti Kustom CSS (Variabel)

Fungsi var() bisa digunakan untuk memasukkan nilai properti khusus.

Browser Pendukung

FunctionGoogle ChromeMicrosoft EdgeMozila FirefoxSafariOpera
var()49.015.031.09.136.0

Fungsi var ()

Variabel di CSS harus dideklarasikan dalam selektor CSS yang menentukan cakupannya. Untuk cakupan global, kita bisa menggunakan: root atau body selector.

Nama variabel harus dimulai dengan dua tanda hubung (-) dan peka huruf besar / kecil!

Sintaks dari fungsi var() adalah sebagai berikut:

var (nama-khusus, nilai)

ValueDeskripsi
custom-nameRequired. Nama properti khusus (harus dimulai dengan dua tanda hubung)
valueOptional. Nilai fallback (digunakan jika properti khusus tidak valid)

Contoh berikut ini, pertama-tama kita akan mendefinisikan properti khusus global bernama “–main-bg-color”, kemudian menggunakan fungsi var () untuk memasukkan nilai properti khusus nanti di style sheet:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --main-bg-color: coral;  
}

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}

#div2 {
  background-color: var(--main-bg-color);
  padding: 5px;
}

#div3 {
  background-color: var(--main-bg-color);
  padding: 5px;
}
</style>
</head>
<body>

<h1>The var() Function</h1>

<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>

<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>

<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>

<p><strong>Note:</strong> Internet Explorer and Edge 14 and earlier versions do not support the var() function.</p>

</body>
</html>

Contoh berikut menggunakan fungsi var () untuk menyisipkan beberapa nilai properti khusus:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --main-bg-color: coral;
  --main-txt-color: blue;  
  --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);
}

#div3 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
</style>
</head>
<body>

<h1>The var() Function</h1>

<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>

<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>

<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>

<p><strong>Note:</strong> Internet Explorer and Edge 14 and earlier versions do not support the var() function.</p>

</body>
</html>

Fungsi CSS var()

PropertyDeskripsi
var()Menyisipkan nilai properti khusus

Hanifah Nurbaeti

Share
Tags: CSSvariabelvariable