Properti kustom

Misalnya, Anda telah membuat beberapa gaya awal untuk situs Anda, dan Anda mendapati diri Anda mengulangi beberapa nilai di CSS. Anda menggunakan dodgerblue sebagai warna primer, dan Anda menambahkannya ke batas tombol, teks link, latar belakang header, serta menggunakan alat desain untuk memilih beberapa varian warna biru tersebut untuk bagian lain situs. Kemudian, Anda akan mendapatkan panduan gaya, dan warna primer kini adalah oklch(70% 0.15 270).

Properti kustom, atau variabel CSS, memungkinkan Anda mengatur dan menggunakan kembali nilai dalam CSS, sehingga gaya Anda lebih fleksibel dan lebih mudah dipahami.

Membuat properti

Cara paling sederhana untuk membuat properti adalah dengan menetapkan nilai pada properti baru dengan nama yang Anda tentukan.

.card {
  --base-size: 1em;
}

Semua nama properti harus diawali dengan dua tanda hubung. Hal ini mencegah Anda mencoba menggunakan nama properti CSS yang ada untuk nilai kustom. Spesifikasi CSS tidak akan pernah menambahkan properti yang dimulai dengan dua tanda hubung.

Properti ini kemudian dapat diakses dengan fungsi var(). Contoh ini menetapkan ukuran font dalam .card-title menjadi dua kali lipat nilai --base-size.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

Menggunakan properti kustom

Seperti yang telah Anda lihat, Anda dapat menggunakan nilai properti kustom dengan fungsi var(). Anda dapat menggunakan fungsi var() dalam nilai, tetapi tidak dalam kueri media. Nilai ini sangat berguna sebagai argumen untuk fungsi CSS lainnya.

Pengganti

Apa yang terjadi jika Anda mencoba menggunakan properti kustom yang tidak memiliki nilai yang ditetapkan? Fungsi var() mengambil nilai kedua yang akan digunakan sebagai nilai penggantian. Nilai penggantian bahkan dapat berupa properti kustom lain dengan var() bertingkat.

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

Nilai tidak valid

Jika properti kustom diselesaikan ke nilai yang tidak valid, misalnya, nilai 1em untuk properti background-color, deklarasi valid lainnya pada elemen tersebut untuk properti tersebut tidak akan digunakan. Hal ini karena browser tidak dapat mengetahui apakah suatu nilai tidak valid hingga setelah membuang deklarasi lain saat menghitung nilai. Sebagai gantinya, nilai yang digunakan akan menjadi nilai yang diwarisi atau nilai awal.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

Dalam contoh sebelumnya, elemen .invalid tidak akan memiliki latar belakang biru. Sebagai gantinya, karena background-color tidak diwarisi, nilainya akan menjadi transparent, yang merupakan nilai awalnya.

Penggantian dan pewarisan

Biasanya, Anda menginginkan perilaku default properti kustom, yaitu nilai diwariskan. Saat Anda menetapkan nilai baru untuk properti, elemen tersebut dan semua turunannya akan memiliki nilai tersebut, hingga digantikan oleh nilai lain.

Properti kustom ditentukan oleh cascade, sehingga juga dapat diganti oleh selektor yang lebih spesifik.

Kontrol yang lebih besar dengan @property

Properti kustom yang dibuat dengan menetapkan nilai dapat berupa jenis apa pun, dan diwariskan. Untuk mendapatkan kontrol lebih besar atas properti kustom, Anda dapat menggunakan aturan @property.

Properti --base-size yang dibuat sebelumnya akan setara dengan deklarasi @property ini.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

Nilai syntax menetapkan jenis nilai CSS yang valid untuk properti. Jika Anda menetapkan jenis yang berbeda pada properti tersebut, properti akan menjadi tidak valid, dan kembali ke nilai awal atau nilai yang diwarisi yang ditetapkan lebih tinggi dalam susunan.

Saat membuat properti kustom menggunakan @property, Anda dapat menonaktifkan pewarisan dengan inherit: false. Mengganti nilai untuk properti kustom dengan pewarisan yang dinonaktifkan akan mengubahnya untuk elemen yang dipilih, tetapi tidak untuk turunannya. Hal ini sering kali berguna saat beberapa pemilih menargetkan elemen yang sama.

initial-value menetapkan nilai properti, kecuali jika diubah nanti. Kecuali sintaksnya adalah *, yang berarti jenis CSS apa pun, @property harus menetapkan initial-value. Hal ini memastikan bahwa properti akan selalu memiliki nilai sintaksis yang ditentukan, dan tidak akan pernah tidak ditentukan.

Memperbarui properti kustom dengan JavaScript

Nilai properti kustom pada elemen dapat diperbarui menggunakan JavaScript, yang dapat Anda gunakan untuk memperbarui gaya situs secara dinamis.

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

Contoh ini memperbarui tag gaya pada elemen #my-button, dan memeriksanya di DevTools akan menunjukkan:

<button id="my-button" style="--color: orange">Click me</button>

Dalam contoh sebelumnya, Anda dapat melihat cara menetapkan properti kustom dengan mengakses data yang disimpan dalam atribut HTML kustom. Setiap tombol memiliki atribut data-color dengan nilai warna tertentu. Properti kustom --background yang ditetapkan pada elemen body direset ke nilai data-color pada tombol mana pun yang diklik.

Anda juga dapat menggunakan getComputedStyle(element).getPropertyValue("--variable") untuk mendapatkan nilai properti pada elemen tertentu. Hal ini dapat berguna jika logika Anda perlu merespons nilai yang dikelompokkan.