Atur @property CSS

Definisi dan penggunaan

CSS @property Aturan digunakan untuk mendefinisikan atribut CSS khusus langsung dalam tabel gaya tanpa perlu menjalankan JavaScript apapun.

@property Aturan memiliki fitur pemeriksaan tipe data dan batasan, dapat diset nilai baku, dan mendefinisikan apakah atribut dapat mewarisi nilai.

Penggunaan @property Manfaatnya:

• Pemeriksaan tipe dan batasan: Harus ditentukan tipe data atribut khusus, seperti <number>, <color>, <length> dll. Ini dapat mencegah kesalahan dan memastikan penggunaan yang benar atribut khusus.
• Atur nilai baku: Bisa diset untuk atribut khusus nilai baku. Ini memastikan bahwa jika nilai yang disediakan kemudian tidak valid, peramban akan menggunakan nilai pengembalian yang ditentukan.
• Atur perilaku warisan: Harus ditentukan apakah atribut khusus dapat mewarisi nilai dari elemen induk.

Contoh: Definisi atribut khusus

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Definisi di atas menunjukkan bahwa --my-color adalah atribut warna, yang dapat mewarisi nilai dari elemen induk dan memiliki nilai baku lightgray.

Menggunakan atribut khusus dalam CSS:

body {}}
  backgound-color: var(--my-color);
}

Contoh

Contoh 1

Tentukan dua properti khusus untuk gradasi - dan gunakan mereka untuk menganimasikan gradasi:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Coba sendiri

Contoh 2

Tentukan dua properti khusus: satu untuk ukuran item dan satu untuk warna item:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Coba sendiri

CSS Syntax

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Nilai properti

Dukungan browser

Angka di tabel menunjukkan versi browser yang sepenuhnya mendukung @ aturan pertama.

Halaman terkait

Panduan:Atur @property CSS