0Pricing
Frontend Academy · Pelajaran

Properti Khusus CSS: mendeklarasikan dan memperbarui

Deklarasikan variabel dengan -- pada :root, rujuk variabel tersebut dengan var(), dan perbarui secara dinamis dengan JavaScript untuk mengubah tema secara langsung.

Properti Khusus CSS: mendeklarasikan dan memperbarui adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Ringkasan: Mendeklarasikan dan Menentukan Lingkup

Properti khusus CSS dideklarasikan dengan awalan -- pada elemen apa pun. Properti yang dideklarasikan pada :root tersedia secara global. Elemen anak mewarisi nilainya dan dapat menimpanya secara lokal.

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

Pembaruan Langsung melalui JavaScript

Properti khusus dapat diubah saat program berjalan. Gunakan element.style.setProperty('--name', value) untuk penimpaan pada tingkat elemen, atau perbarui variabel global pada :root agar langsung memengaruhi semua penggunanya.

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

Membaca Nilai Properti Khusus dalam JS

Baca properti khusus dengan getComputedStyle(element).getPropertyValue('--name').trim(). Cara ini membaca nilai terhitung (berdasarkan kaskade), bukan hanya nilai sebaris.

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

Menganimasikan Properti Khusus

Properti khusus dapat diinterpolasikan oleh peramban menggunakan @property (Houdini), atau digunakan dalam transisi jika digabungkan dengan calc(). Tanpa @property, peramban tidak dapat melakukan transisi langsung di antara nilai variabel.

@property — Properti Khusus Terdaftar

Aturan CSS @property mendaftarkan properti khusus dengan tipe, nilai awal, dan aturan pewarisan. Properti yang terdaftar dapat ditransisikan dan dianimasikan secara bawaan.

@property --brand-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

Sistem Token dengan Properti Khusus

Model token desain: simpan semua keputusan desain sebagai properti khusus. Komponen menggunakan token, bukan nilai yang ditulis secara langsung. Perubahan pada sebuah token menyebar ke semua tempat.

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

Properti Khusus Responsif

Ubah nilai properti khusus di dalam kueri media. Komponen yang menggunakan variabel tersebut akan menyesuaikan diri secara otomatis—lebih rapi daripada menulis aturan komponen terpisah untuk setiap titik henti.

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

Properti Khusus dalam calc()

Gunakan variabel di dalam calc() untuk jarak dan ukuran turunan. Hal ini menciptakan sistem ukuran yang koheren dan konsisten secara matematis.

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

Memberi Tema pada Banyak Merek

Tetapkan token tema yang berbeda untuk setiap atribut data. Satu halaman dapat mendukung beberapa tema untuk pelabelan merek.

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

Properti Khusus dalam SVG

Atribut SVG seperti isian dan goresan dapat menggunakan properti khusus. Dengan demikian, Anda dapat memberi tema pada ikon dari CSS tanpa mengubah markup SVG.

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

Men-debug Properti Khusus

Di Chrome DevTools, pilih elemen lalu lihat tab Terhitung untuk menemukan nilai properti khusus. Panel Gaya menunjukkan tempat setiap variabel dideklarasikan. Bagian Diwariskan menunjukkan variabel dari elemen induk.

Pemeriksaan Singkat

Metode JavaScript mana yang memperbarui properti khusus CSS pada sebuah elemen?

Ringkasan: Properti Khusus CSS secara Mendalam

Deklarasikan pada :root untuk nilai global; timpa pada turunan untuk lingkup lokal. Perbarui dengan style.setProperty dari JS. Baca dengan getComputedStyle. @property mengaktifkan transisi bawaan. Gunakan sebagai token desain untuk satu sumber kebenaran. Timpa dalam kueri media untuk token responsif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Properti Khusus CSS: mendeklarasikan dan memperbarui” gratis?

Ya — teks lengkap “Properti Khusus CSS: mendeklarasikan dan memperbarui” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Properti Khusus CSS: mendeklarasikan dan memperbarui”?

Deklarasikan variabel dengan -- pada :root, rujuk variabel tersebut dengan var(), dan perbarui secara dinamis dengan JavaScript untuk mengubah tema secara langsung. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Properti Khusus CSS: mendeklarasikan dan memperbarui” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Properti Khusus CSS: mendeklarasikan dan memperbarui
  2. Transisi: properti, durasi, waktu
  3. Animasi @keyframes
  4. Menghormati prefers-reduced-motion
← Kembali ke Frontend Academy