Peraturan @property CSS

Definisi dan penggunaan

CSS @property Aturan ini digunakan untuk mendefinisikan atribut CSS pilihan langsung di tabel gaya tanpa meluncurkan apa pun JavaScript.

@property Aturan yang memiliki fungsi pemeriksaan tipe data dan batasan, dapat disetel nilai standar, dan mendefinisikan apakah atribut dapat mewarisi nilai.

Penggunaan @property Manfaatnya:

• Pemeriksaan tipe dan batasan: Harus ditentukan tipe data atribut pilihan, seperti <number>、<color>、<length> dll. Ini dapat mencegah kesalahan dan memastikan penggunaan yang benar atribut pilihan.
• Setelan nilai standar: Bisa disetel nilai standar untuk atribut pilihan. Ini memastikan bahwa jika nilai yang diberikan kemudian tidak sah, peramban akan menggunakan nilai pengecualian yang ditentukan.
• Setelan perilaku pengambilan: Harus ditentukan apakah atribut pilihan dapat mewarisi nilai dari elemen induk.

Contoh: Definisi atribut pilihan

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

Definisi di atas menunjukkan --my-color adalah atribut warna, ia dapat mewarisi nilai dari elemen induk, dan nilai standar adalah lightgray.

Penggunaan atribut pilihan di CSS:

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

实例

例子 1

为渐变指定两个自定义属性 - 并使用它们来动画化渐变：

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

亲自试一试

例子 2

指定两个自定义属性：一个用于项目大小，一个用于项目颜色：

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

亲自试一试

CSS 语法

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

属性值

浏览器支持

数字在表格中表示首个完全支持该 @ 规则的浏览器版本。

Halaman berkaitan

Panduan:Peraturan @property CSS