ບັນດາພາສາ 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 ຂໍ້ສັນຍາ
- ຫຼັກສູດຕໍ່ຫຼັງ ຫຼັກສູດກ່ອນ
- ຫຼັກສູດຕໍ່ໄປ ຄຳນວຍຫຼັກສູດ