Section Artikel
Properti Kustom CSS (Variabel)
Fungsi var() bisa digunakan untuk memasukkan nilai properti khusus.
Browser Pendukung
| Function | Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.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)
| Value | Deskripsi |
|---|---|
| custom-name | Required. Nama properti khusus (harus dimulai dengan dua tanda hubung) |
| value | Optional. 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()
| Property | Deskripsi |
|---|---|
| var() | Menyisipkan nilai properti khusus |
