Aturatur @property CSS

Aturatur @property CSS

@property Aturan digunakan untuk mendefinisikan properti CSS kustom secara langsung di tabel gaya tanpa perlu menjalankan JavaScript apapun.

@property Aturan memiliki pemeriksaan tipe data dan batasan, menetapkan nilai default, dan mendefinisikan apakah properti dapat mewarisi nilai.

Definisi contoh properti kustom:

@property --myColor {
  syntax: "<color>";
  mewarisi: benar;
  nilai awal: putih abu-abu;
}

Definisi di atas menunjukkan --myColor Merupakan properti warna, yang dapat mewarisi nilai dari elemen induk, nilai defaultnya adalah lightgray.

Untuk menggunakan properti kustom di CSS, kami menggunakan var() Fungsi:

body {
  background-color: var(--myColor);
}

Penggunaan @property Manfaatnya:

• Pemeriksaan Tipe：Harus ditentukan jenis data atribut yang disesuaikan, seperti <number>、<color>、<length>. Ini dapat mencegah kesalahan dan memastikan penggunaan yang benar atribut yang disesuaikan
• Pengaturan nilai default：Bisa menetapkan nilai default untuk atribut yang disesuaikan. Ini memastikan bahwa jika nilai yang tidak sah ditetapkan nantinya, browser akan menggunakan nilai cadangan yang ditentukan.
• Pengaturan perilaku pengecekan：Harus ditentukan apakah atribut yang disesuaikan dapat mewarisi nilai dari elemen induknya.

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung aturan ini.

contoh @property sederhana

Pada contoh berikut, kita mendefinisikan dua atribut yang disesuaikan:--my-bg-color dan --my-txt-color. Lalu, div di background-color dan warna dalam menggunakan atribut yang disesuaikan:

Contoh

@property --my-bg-color {
  syntax: "<color>";
  mewarisi: benar;
  nilai awal: putih abu-abu;
}
@property --my-txt-color {
  syntax: "<color>";
  mewarisi: benar;
  nilai awal: biru gelap;
}
div {
  lebar: 300px;
  tinggi: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  warna: var(--my-txt-color);
}

Coba Sendiri

instansi @property lain

Pada contoh berikut, kita menggunakan atribut yang disesuaikan yang diatur secara default di elemen <div>. Lalu kita .fresh dan .nature Kelas menutupi atribut yang disesuaikan (dengan menetapkan warna lain), efek sangat baik:

Contoh

@property --my-bg-color {
  syntax: "<color>";
  mewarisi: benar;
  nilai awal: putih abu-abu;
}
div {
  lebar: 300px;
  tinggi: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Coba Sendiri

melalui pemeriksaan tipe dan nilai cadangan untuk menghindari kesalahan

Pada contoh berikut, kita akan .nature Atribut yang disesuaikan dalam kelas diatur sebagai bilangan. Ini adalah yang tidak sah, dan browser akan menggunakan yang ada di nilai awal Warna cadangan yang didefinisikan dalam atribut (putih abu-abu):

Contoh

@property --my-bg-color {
  syntax: "<color>";
  mewarisi: benar;
  nilai awal: putih abu-abu;
}
div {
  lebar: 300px;
  tinggi: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Coba Sendiri

menggunakan nilai inherits

Pada contoh berikut, kita akan mewarisi nilai diatur salahArtinya, atribut yang disesuaikan tidak akan mewarisi nilai dari elemen induknya. Lihat hasilnya:

Contoh

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  nilai awal: putih abu-abu;
}

Coba Sendiri

Contoh berikutnya akan mewarisi nilai diatur benarArtinya, atribut yang disesuaikan akan mewarisi nilai dari elemen induknya. Lihat hasilnya:

Contoh

@property --my-bg-color {
  syntax: "<color>";
  mewarisi: benar;
  nilai awal: putih abu-abu;
}

Coba Sendiri

Membuat animasi yang lancar menggunakan @property

Penggunaan @property kesempatan yang dapat dicapai dengan aturan ini adalah animasi konten yang sebelumnya tidak dapat di-animasikan: gelombang. Lihat contoh berikut:

Contoh

Tentukan dua properti yang disesuaikan untuk gelombang:

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

Coba Sendiri

Aturatur @property CSS