0Pricing
CSS Academy · Pelajaran

API Properti dan Nilai CSS (@property)

Daftarkan properti khusus dengan tipe dan pewarisan menggunakan @property agar variabel CSS dapat dianimasikan.

API Properti dan Nilai CSS (@property) adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu @property?

@property adalah cara CSS untuk mendaftarkan properti kustom dengan tipe, perilaku pewarisan, dan nilai awal. Ini merupakan bentuk deklaratif dari CSS Properties and Values API (CSS.registerProperty).

Sintaks @property

Daftarkan properti kustom dengan tiga deskriptor yang wajib:

<div class="box"></div>

Deskriptor sintaks

Deskriptor syntax menentukan tipe properti menggunakan nama tipe CSS:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — menerima nilai apa pun (seperti properti yang tidak terdaftar)

Deskriptor pewarisan

Deskriptor ini mengontrol apakah properti diwariskan melalui DOM. Tetapkan false untuk properti yang harus terisolasi pada setiap elemen.

Deskriptor nilai awal

Deskriptor ini menyediakan nilai awal yang terjamin ketika properti tidak ditetapkan. Hal ini membuat properti dapat dianimasikan.

Menganimasikan Properti Kustom

Manfaat utama @property: properti kustom yang terdaftar dapat diberi transisi dan dianimasikan karena peramban mengetahui tipenya dan dapat melakukan interpolasi antarnilai:

<div class="element is-hovered"></div>

Tanpa @property

Tanpa pendaftaran, CSS tidak mengetahui tipe properti kustom. Transisi antara dua nilai variabel langsung berpindah alih-alih melakukan interpolasi — peramban tidak dapat menghitung titik tengah dari tipe yang tidak dikenal.

@property untuk Animasi Gradien

Menganimasikan titik henti gradien (sebelumnya tidak mungkin dilakukan tanpa @property):

<div class="loader loading"></div>

Padanan JavaScript

Anda juga dapat mendaftarkan properti menggunakan API JavaScript:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Dukungan Peramban

@property didukung di Chrome 85+, Edge 85+, Safari 16.4+, dan Firefox 128+. Fitur ini tersedia secara luas di peramban modern.

Penggunaan Praktis @property

Kasus penggunaan umum:

  • Menganimasikan posisi dan warna gradien
  • Menganimasikan rona/saturasi dalam warna HSL
  • Animasi pengisian bilah kemajuan
  • Animasi penghitung untuk menampilkan angka
  • Transisi mode gelap/terang yang mulus melalui animasi nilai warna

Pemeriksaan Singkat

Mengapa @property diperlukan untuk menganimasikan properti kustom CSS?

Ringkasan

@property mendaftarkan properti kustom dengan tipe syntax, penanda inherits, dan initial-value. Properti yang terdaftar dapat dianimasikan dan diberi transisi karena peramban dapat melakukan interpolasi terhadap nilai bertipenya. Hal ini memungkinkan animasi gradien, transisi rona, dan animasi penghitung yang tidak mungkin dilakukan dengan properti kustom yang tidak terdaftar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “API Properti dan Nilai CSS (@property)” gratis?

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

Apa yang akan aku pelajari di “API Properti dan Nilai CSS (@property)”?

Daftarkan properti khusus dengan tipe dan pewarisan menggunakan @property agar variabel CSS dapat dianimasikan. Kamu berlatih CSS 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 CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS 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 2 dari 4.

Berapa lama pelajaran “API Properti dan Nilai CSS (@property)” 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 CSS Academy ini?

Ya. Setiap pelajaran CSS 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. CSS Typed Object Model (OM)
  2. API Properti dan Nilai CSS (@property)
  3. API Paint CSS: Worklet
  4. API Tata Letak CSS dan Cakupan
← Kembali ke CSS Academy