CSS กฎ @container

  • หน้าก่อน columns
  • หน้าต่อไป content

การประกาศและการใช้งาน

CSS @container กฎที่ใช้ในการกำหนดรูปแบบสำหรับองค์ประกอบอื่นๆ ตามขนาดหรือรูปแบบของโคหนาว

การระบุรูปแบบจะถูกกรองตามเงื่อนไข ถ้าเงื่อนไขเป็นความจริง ก็จะใช้บนโคหนาว ขณะที่ขนาดหรือค่าของรูปแบบของโคหนาวเปลี่ยนแปลง เงื่อนไขจะถูกประเมินใหม่

คำแนะนำ:ใน CSS โคหนาวเป็นองค์ประกอบที่วงล้อมองค์ประกอบอื่นๆ ที่ใช้ในการกลุ่มองค์ประกอบเพื่อการกำหนดรูปแบบ

ตัวอย่าง

กำหนดรูปแบบสำหรับองค์ประกอบอื่นๆ ตามขนาดหรือรูปแบบของโคหนาว

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* เพิ่มรูปแบบหาก myContainer มีความกว้างต่ำกว่า 500px */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

ลองทดลองเอง

CSS โฉมภาษา

@container containername (containerquery) {
  การระบุ css
}

ค่าของรูปแบบ

ค่า คำอธิบาย
containername เลือกตั้ง ชื่อของโคหนาว
containerquery

สำหรับเงื่อนไขที่ต้องการประเมิน ถ้าเงื่อนไขในตอนนี้เป็นความจริง ก็จะใช้รูปแบบ

สามารถใช้ได้ containerquery ในคำอธิบายต่อไปนี้:

  • aspect-ratio
  • block-size
  • height
  • inline-size
  • orientation
  • width

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางนี้ระบุสำหรับเวอร์ชันบราวเซอร์ที่สนับสนุนความถูกต้องที่สุดของ @ กฎแรก

Chrome Edge Firefox Safari Opera
105 105 110 16 91
  • หน้าก่อน columns
  • หน้าต่อไป content