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

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 */
    }
  }
}

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