การค้นหาคอนเทนเนอร์

Media Queries ช่วยให้คุณปรับเลย์เอาต์ตามขนาดของวิวพอร์ตหรือประเภทของอุปกรณ์ที่ใช้ได้ การค้นหาคอนเทนเนอร์ช่วยให้คุณปรับองค์ประกอบได้อย่างเฉพาะเจาะจงมากขึ้นตามขนาดและสถานะขององค์ประกอบระดับบนสุดหรือคอนเทนเนอร์

สมมติว่าคุณมีแบบฟอร์มลงชื่อสมัครรับจดหมายข่าวที่ตั้งใจจะใช้ในหลายบริบทบนเว็บไซต์ คุณอาจต้องการให้ครอบคลุมความกว้างเต็มหน้าในหน้าลงชื่อสมัครใช้ แต่ให้แสดงในคอลัมน์แยกในหน้าที่มีเนื้อหาอื่นๆ

ดังที่แสดงในเดโมนี้ การค้นหาคอนเทนเนอร์ช่วยให้คุณปรับพร็อพเพอร์ตี้ต่างๆ เช่น font-size, padding และเลย์เอาต์ขององค์ประกอบตามแอตทริบิวต์ของคอนเทนเนอร์ที่ใกล้ที่สุดได้ โดยไม่ขึ้นอยู่กับขนาดวิวพอร์ต

การตั้งค่าการค้นหาคอนเทนเนอร์

การค้นหาคอนเทนเนอร์จะสร้างขึ้นใน 2 ส่วน ซึ่งต่างจากการค้นหาสื่อ ดังนี้

1. กำหนดคอนเทนเนอร์
2. เขียนสไตล์สำหรับองค์ประกอบย่อยที่จะใช้เมื่อคอนเทนเนอร์หลักตรงกับเงื่อนไขของคำค้นหา

การกำหนดคอนเทนเนอร์

คุณกำหนดคอนเทนเนอร์ได้โดยใช้พร็อพเพอร์ตี้ container-type

.my-container-element {   container-type: inline-size; } 

container-type ของ inline-size ช่วยให้คุณค้นหาแกนแบบอินไลน์ของคอนเทนเนอร์ได้

หากต้องการค้นหาทั้งแกน inline และ block ให้ใช้ container-type: size

main, .my-component {   container-type: size; } 

ค่าทั้ง 2 ค่าของ container-type จะใช้การจำกัดขนาดประเภทต่างๆ Inline-size ในองค์ประกอบจะป้องกันไม่ให้องค์ประกอบย่อยส่งผลต่อขนาดแบบอินไลน์

องค์ประกอบที่มีการบรรจุ size จะป้องกันไม่ให้องค์ประกอบย่อยส่งผลต่อขนาดขององค์ประกอบในทั้งแกนบล็อกและแกนอินไลน์

ในตัวอย่างนี้ คุณจะเห็นว่าการจำกัดขนาดอาจส่งผลต่อองค์ประกอบที่ใช้

เนื่องจากจะไม่ปรับขนาดตามขนาดขององค์ประกอบย่อย (องค์ประกอบ <p>) คอนเทนเนอร์จะยุบลง เว้นแต่จะกำหนดขนาดอย่างชัดเจนโดยการตั้งค่ามิติข้อมูล (เช่น inline-size, block-size, aspect-ratio) หรือวางไว้ในเลย์เอาต์ที่มีการกำหนดขนาดอย่างชัดเจน

เงื่อนไขการค้นหาคอนเทนเนอร์

เมื่อสร้างคอนเทนเนอร์แล้ว คุณจะเพิ่มเงื่อนไขที่อยู่ในวงเล็บได้ ซึ่งต้องเป็นจริงเพื่อให้ใช้สไตล์ภายใน Container Query ได้ สําหรับการค้นหาขนาดคอนเทนเนอร์ซึ่งอิงตามมิติข้อมูลขององค์ประกอบระดับบน เงื่อนไขจะประกอบด้วยข้อมูลต่อไปนี้

• ฟีเจอร์ขนาด: width, height, inline-size, block-size, aspect-ratio หรือ orientation
• โอเปอเรเตอร์การเปรียบเทียบ (เช่น >, <, =, >=)
• และค่าความยาว

.my-container-element {   container-type: inline-size; }  @container (inline-size > 30em) {   .my-child-element {     /* styles to apply when .my-container-element is wider than 30em */   } } 

คุณยังเขียนเงื่อนไขฟีเจอร์ขนาดด้วยโคลอนและค่าเดียวเพื่อทดสอบได้ด้วย

@container (orientation: landscape) {   /*...*/ }  @container (min-width: 300px) {   /*...*/ } 

นอกจากนี้ คุณยังรวมเงื่อนไขหลายรายการได้โดยใช้คีย์เวิร์ด เช่น and และ or หรือเชื่อมโยงเงื่อนไขหลายรายการเข้าด้วยกันด้วยโอเปอเรเตอร์

@container (inline-size > 40em) and (orientation: landscape)  {   /*...*/ }  @container (height > 25vh) or (orientation: portrait) {   /*...*/ }  @container ( 10em <= width <= 500px) {   /*...*/ } 

การตั้งชื่อคอนเทนเนอร์

หากต้องการกำหนดเป้าหมายคอนเทนเนอร์ที่เฉพาะเจาะจง แม้ว่าคอนเทนเนอร์นั้นจะไม่ใช่คอนเทนเนอร์ระดับบนสุดที่ใกล้ที่สุด คุณก็ตั้งชื่อคอนเทนเนอร์ด้วยพร็อพเพอร์ตี้ container-name ได้ จากนั้นคุณจะอ้างอิงชื่อคอนเทนเนอร์ที่ต้องการค้นหาก่อนกำหนดเงื่อนไขได้

.sidebar {   container-name: main-sidebar;   container-type: inline-size; }  @container main-sidebar (inline-size > 20em)  {   .button-group {     display: flex;     padding-inline: 1.25em;   } } 

คอนเทนเนอร์ที่มีชื่อยังคงต้องเป็นบรรพบุรุษขององค์ประกอบที่กำลังจัดรูปแบบ

ใช้รูปแบบย่อกับพร็อพเพอร์ตี้ container

พร็อพเพอร์ตี้ container ช่วยให้คุณใช้ไวยากรณ์แบบย่อเพื่อกำหนดคอนเทนเนอร์และระบุประเภทคอนเทนเนอร์ได้

.sidebar {   container: main-sidebar / inline-size; } 

ชื่อคอนเทนเนอร์จะอยู่ก่อนเครื่องหมายทับ และประเภทคอนเทนเนอร์จะอยู่หลังเครื่องหมายทับ

หน่วยการค้นหาคอนเทนเนอร์

นอกจากนี้ คุณยังมีสิทธิ์เข้าถึงหน่วยความยาวสัมพัทธ์ของคอนเทนเนอร์ภายในคอนเทนเนอร์ด้วย ซึ่งจะช่วยเพิ่มความยืดหยุ่นให้กับคอมโพเนนต์ที่อาจอยู่ในคอนเทนเนอร์ต่างๆ เนื่องจากความยาวสัมพัทธ์จะปรับตามขนาดของคอนเทนเนอร์

ในที่นี้ ระบบใช้หน่วยความยาวของคอนเทนเนอร์ cqi (1% ของขนาดอินไลน์ของคอนเทนเนอร์คำค้นหา) สำหรับระยะขอบของปุ่ม

.container {   container: button-container / inline-size; }  .one {   inline-size: 30vw; }  .two {   inline-size: 50vw; }  button {   padding: 2cqi 5cqi; } 

ปุ่มทั้ง 2 ปุ่มใช้หน่วยสัมพัทธ์เดียวกัน แต่เนื่องจากหน่วยสัมพัทธ์นั้นสัมพันธ์กับขนาดของคอนเทนเนอร์ ปุ่มที่ 2 จึงมีระยะห่างภายในมากกว่าเนื่องจากคอนเทนเนอร์มีขนาดใหญ่กว่า

การซ้อนการค้นหาคอนเทนเนอร์

คุณซ้อนการค้นหาคอนเทนเนอร์ไว้ในตัวเลือกได้

.my-element {   display: grid;   padding: 1em 2em;    @container my-container (min-inline-size: 22em) {     /* styles to apply when element's container is wider than 22em */   } }  /* equivalent to */ .my-element {   display: grid;   padding: 1em 2em; }  @container my-container (min-inline-size: 22em) {   .my-element {      /* styles to apply when element's is wider than 22em */   } } 

หรือจะซ้อนไว้ภายใน Container Query หรือกฎ @ อื่นๆ ก็ได้

@container my-container (min-inline-size: 22em) {   .my-element {       /* styles to apply when element's is wider than 22em */   } } 

@layer base {   @container my-container (min-inline-size: 22em) {     .my-element {     /* styles to apply */     }   } } 

ทดสอบความเข้าใจ