ບັນດາພາສາ CSS @property ຂໍ້ສັນຍາ

ການກໍານົດ ແລະການນຳໃຊ້

CSS @property ປະກອບກົດລະບຽບມີການກໍານົດປະສົມປະກອບ CSS ທີ່ຕັ້ງແຕ່ບົດສະຕິງ ໂດຍບໍ່ຕ້ອງນຳໃຊ້ JavaScript.

@property ປະກອບກົດລະບຽບມີການກວດກາປະເພດຂອງບັນດາປະເພດ ແລະສາມາດກໍານົດຄຳພາສາມີຈຳນວນທີ່ພົບ ແລະກໍານົດປະສົມປະກອບທີ່ສາມາດຫຼິ້ນຕົວຫຼືບໍ່.

ນຳໃຊ້ @property ຜົນປະໂຫຍດ:

  • ການກວດກາປະເພດຂອງບັນດາປະກອບ: ຕ້ອງກໍານົດປະເພດຂອງປະສົມປະກອບ ເຊັ່ນ <number>、<color>、<length> ແລະອີກ. ນີ້ສາມາດປ້ອງກັນຄວາມຜິດພາດ ແລະຮັບປະກັນການນຳໃຊ້ປະສົມປະກອບທີ່ຖືກກົດຫມາຍ.
  • ການກໍານົດຄຳພາສາມີຈຳນວນທີ່ພົບ: ສາມາດກໍານົດຄຳພາສາມີຈຳນວນທີ່ພົບເພື່ອປະສົມປະກອບທີ່ບໍ່ມີຄຳພາສາທີ່ບໍ່ມີຈຳນວນທີ່ພົບ ຂະນະທີ່ບັນຊີບາດບານຈະໃຊ້ຄຳພາສາທີ່ມີຈຳນວນທີ່ພົບ.
  • ການກະກຽມການຫຼິ້ນຕົວ: ຕ້ອງການກໍານົດປະສົມປະກອບທີ່ສາມາດຫຼິ້ນຕົວຢູ່ຈາກປະກອບຜູ້ປົກຄອງຫຼືບໍ່.

ຕົວຢ່າງ: ກໍານົດປະສົມປະກອບທີ່ຕັ້ງແຕ່ບົດສະຕິງ

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

ການກໍານົດນີ້ສະແດງວ່າ --my-color ເປັນປະສົມປະກອບສີນີ້ຢ່າງທີ່ສາມາດຫຼິ້ນຕົວຢູ່ຈາກປະກອບຜູ້ປົກຄອງ ແລະມີຄຳພາສາແບບ lightgray ເປັນຄຳພາສາມີຈຳນວນທີ່ພົບຢູ່.

ນຳໃຊ້ປະສົມປະກອບທີ່ຕັ້ງແຕ່ບົດສະຕິງ 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;
}

ຄຳນວນຂອງລັກສະນະ

ຄຳນວນ ການອະທິບາຍ
--propertyname ຕ້ອງການ. ຊື່ຂອງລັກສະນະທີ່ກໍານົດ.
syntax

ສາມາດເປັນ <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function> ຫຼື <custom-ident>, ຫຼື ລາຍການຂອງຄວາມມອງທີ່ມີຄຳວັດຖຸ ຫຼື ຄຳຫຼັກ.

+ (ຈຳນວນອາກາດ) ແລະ # (ຈຳນວນວຽນ) ສະແດງວ່າຈະມີລາຍການຄຳນວນ, ອີງຕາມຫົວຂໍ້ທີ່ຄິດວ່າ, <color># ຄວາມຄິດວ່າຈະເປັນລາຍການຂອງລາຍການລັກສະນະສີ.

ການໃຊ້ຕາຕະລາງ (|) ສາມາດສ້າງຄວາມຄຸມຄົນຢູ່ທີ່ສາມາດກວມເຂົ້າໄດ້, ອີງຕາມຫົວຂໍ້ທີ່ຄິດວ່າ, <length> | auto ຍອມຮັບ <length> ຫຼື auto, ແລະ <color># | <integer># ຄວາມຄິດວ່າຈະເປັນລາຍການຂອງລາຍການລັກສະນະສີຫຼືລາຍການຂອງລາຍການຈຳນວນ.

initial-value ການກະກຽມຄຳນວນສະນວນຂອງລັກສະນະ.
inherits true ຫຼື false. ຄວບຄຸມການສະແດງລວມທີ່ຈະຕ້ອງສົມທົບຂອງລັກສະນະທີ່ກໍານົດໂດຍ @property.

ການສະໜັບສະໜູນບັນດາຄອມພິວເຕີ້

ຈຳນວນທີ່ໃນຕາມກຳນົດຢູ່ບ່ອນນີ້ສະແດງວ່າບັນດາຄອມພິວເຕີ້ທີ່ເປັນການສະໜັບສະໜູນຕົ້ນທີ່ສຸດຂອງ @ ກົດລະບຽບນັ້ນ.

Chrome Edge Firefox Safari Opera
85 85 128 16.4 71

ຫຼັກສູດກ່ຽວກັບ

ຫຼັກສູດ:ບັນດາພາສາ CSS @property ຂໍ້ສັນຍາ