Panduan Pemula untuk CSS @property untuk pembolehubah tersuai

CSS berkembang mengikut peredaran masa dan ciri yang lebih baharu semakin ditambah padanya memudahkan untuk melaksanakan fungsi yang paling biasa digunakan. Hari ini kita akan melihat sekali ciri sedemikian yang menjadikan css lebih berkuasa.

@property (at-rule) membenarkan pembangun mentakrifkan sifat tersuai. Dalam siaran ini, kita akan melihat apa itu @property, sebab ia berguna dan cara menggunakannya dengan beberapa contoh praktikal.

Apakah itu @property At-Rule?

Sifat tersuai CSS (pembolehubah) telah wujud sejak sekian lama dan ia membenarkan anda menyimpan dan menggunakan semula nilai seperti warna, saiz fon atau sebarang nilai penggayaan yang lain. Walau bagaimanapun, sehingga baru-baru ini, mereka tidak mempunyai ciri lanjutan seperti menentukan jenis, nilai lalai. Ini amat berguna jika kita mahu melaksanakan animasi yang kompleks (lebih lanjut mengenainya dalam siaran akan datang).

Peraturan @property mewakili pendaftaran harta tersuai terus dalam lembaran gaya tanpa perlu menjalankan sebarang js.

Sintaks asas

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

• sintaks: Mentakrifkan jenis data yang dijangkakan bagi harta tersebut. Dalam kes ini, ia adalah warna (), tetapi ia boleh menjadi mana-mana jenis data CSS yang sah seperti , atau .
• mewarisi: Menentukan sama ada nilai harta perlu diwarisi oleh elemen anak. Ia boleh ditetapkan kepada benar atau palsu.
• nilai awal: Menetapkan nilai lalai untuk harta itu apabila tiada yang disediakan.

Bila hendak menggunakan @property

• Apabila anda perlu menghidupkan atau mengalihkan sifat tersuai untuk memastikan kelakuan lancar.
• Untuk menguatkuasakan jenis data (seperti warna, panjang atau nombor) untuk mengelakkan pepijat daripada nilai yang tidak sah.
• Untuk menetapkan nilai lalai bagi sifat tersuai bagi mengekalkan gaya yang konsisten apabila nilai tiada.
• Kawal pewarisan sifat tersuai antara elemen induk dan anak.

Baca lagi

• Dokumen MDN @property

Catatan asal

Atas ialah kandungan terperinci Panduan Pemula untuk CSS @property untuk pembolehubah tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!