ປະເພດ CSS @container

ການອະທິບາຍແລະການນໍາໃຊ້

CSS @container ບົດບັນຍາວ່າສະແດງຊົງວຽກງານສຳລັບປະກອບອາກາດອື່ນໆອີງຕາມຂະໜາດຫຼືການຈັດສົມບູນຂອງຄວາມເຊື່ອມຕໍ່.

ການອະທິບາຍຊົງວຽກງານຈະຖືກກວດກາຕາມສະພາບການຕິດຕາມ, ຖ້າສະພາບການຕິດຕາມມີຄວາມຈິງ, ຈະນໍາໃຊ້ຕໍ່ຄວາມເຊື່ອມຕໍ່. ຖ້າຂະໜາດຫຼືຄວາມຈັດສົມບູນຂອງຄວາມເຊື່ອມຕໍ່ປ່ຽນແປງ, ສະພາບການຕິດຕາມຈະຖືກກວດກາຄືນ.

ຄຳແນະນຳ:ໃນ CSS, ຄວາມເຊື່ອມຕໍ່ແມ່ນປະກອບອາກາດທີ່ກວມຕົວປະກອບອາກາດອື່ນໆເພື່ອຈັດການຊົງວຽກງານການຈັດສົມບູນ.

ຄວາມຍົກກະຕິ

ການສະແດງຊົງວຽກງານສຳລັບປະກອບອາກາດອື່ນໆອີງຕາມຂະໜາດຫຼືການຈັດສົມບູນຂອງຄວາມຈັດສົມບູນ.

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

ການທົດລອງຄົນຕົວຕົນ.

ການບັນຍາຍ CSS

@container containername (containerquery) {
  ການອະທິບາຍ css
}

ຄວາມຜົນວຽກງານຂອງບັນດາບັນດາລະບຽບ.

ການສະຫຼັບບັນຍາການບັນຊີ.

ຈຳນວນໃນຕາຕະລາງສະແດງວ່າລະບົບການອອກສາຍທີ່ເປັນທີ່ສົມບູນສະຫຼັບ @ ບົດບັນຍັດນັ້ນ.