ตรวจสอบและแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ CSS

Sofia Emelianova

Jecelyn Yeen

คู่มือนี้จะแสดงวิธีตรวจสอบและแก้ไขข้อบกพร่องของคำค้นหาคอนเทนเนอร์ CSS ในแผงองค์ประกอบในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

ภาพหน้าจอในคู่มือนี้นำมาจากหน้าสาธิตนี้

ค้นพบคอนเทนเนอร์และองค์ประกอบสืบทอด

ทุกองค์ประกอบที่กำหนดเป็นคอนเทนเนอร์การค้นหาจะมีป้าย container อยู่ข้างๆ ในแผงองค์ประกอบ ป้ายจะเปิด/ปิดการซ้อนทับเส้นประของคอนเทนเนอร์และรายการที่สืบทอด

วิธีสลับการวางซ้อน

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. ในแผงองค์ประกอบ ให้คลิกป้าย container ข้างองค์ประกอบที่กำหนดไว้เป็นคอนเทนเนอร์

ในตัวอย่างนี้ พร็อพเพอร์ตี้ container-type: inline-size กำหนดองค์ประกอบคอนเทนเนอร์ รายการที่สืบทอดสามารถค้นหามิติข้อมูลในบรรทัด (แกนนอน) และเปลี่ยนสไตล์ตามความกว้างของคอนเทนเนอร์

ตรวจสอบการค้นหาคอนเทนเนอร์

แผงองค์ประกอบจะแสดงประกาศการค้นหา @container เมื่อนำไปใช้กับองค์ประกอบที่สืบทอดมา ซึ่งก็คือเมื่อคอนเทนเนอร์เป็นไปตามเงื่อนไขของการค้นหา

โปรดดูตัวอย่างโค้ดต่อไปนี้เพื่อทำความเข้าใจว่าคุณสามารถตรวจสอบการประกาศ @container ในหน้าสาธิตนี้ได้เมื่อใด

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

ในตัวอย่างนี้ หากความกว้างของคอนเทนเนอร์เกินจำนวนพิกเซลต่อไปนี้ ระบบจะใช้สไตล์ที่เกี่ยวข้อง

• มากกว่า 400px: องค์ประกอบย่อหน้า (p) จะปรากฏในหน้าเว็บเป็นบล็อก โดยจะเริ่มที่บรรทัดใหม่และใช้ความกว้างทั้งหมด
• มากกว่า 600px: องค์ประกอบสืบทอดจะใช้เลย์เอาต์ตารางกริดแนวนอนโดยมีชื่อ (h1) อยู่ด้านบน และรูปภาพ (img) ทางด้านซ้าย

วิธีตรวจสอบการประกาศ @container รายการแรก

1. ในแผงองค์ประกอบ ให้ตั้งค่าความกว้างของคอนเทนเนอร์เป็น 500px องค์ประกอบ p จะปรากฏขึ้น

2. เลือกองค์ประกอบ p ในแผงรูปแบบ คุณจะเห็นการประกาศ @container พร้อมกับลิงก์ไปยังคอนเทนเนอร์ระดับบนสุด article.card

   

3. ตั้งค่าความกว้างให้มากกว่า 600px แล้วเลือกองค์ประกอบที่ได้รับผลกระทบ ตรวจสอบประกาศ @container ที่ใช้เลย์เอาต์แนวนอน

   

ค้นหาองค์ประกอบคอนเทนเนอร์

หากต้องการค้นหาและเลือกองค์ประกอบคอนเทนเนอร์ที่ทําให้คําค้นหามีผล ให้วางเมาส์เหนือและคลิกชื่อองค์ประกอบเหนือคําประกาศ @container

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

แก้ไขการค้นหาคอนเทนเนอร์

หากต้องการแก้ไขข้อสอบถาม คุณสามารถแก้ไขเป็นประกาศ CSS อื่นๆ ในแผงสไตล์ตามที่อธิบายไว้ในดูและเปลี่ยน CSS

ในตัวอย่างนี้ ความกว้างของคอนเทนเนอร์คือ 500px องค์ประกอบย่อหน้า (p) จะปรากฏในหน้า

1. เลือกองค์ประกอบ p ในแผงรูปแบบ คุณจะเห็นประกาศ @container (inline-size > 400px)
2. เปลี่ยน inline-size จาก 400px เป็น 520px
3. องค์ประกอบย่อหน้า (p) จะหายไปจากหน้าเนื่องจากไม่เป็นไปตามเกณฑ์การค้นหา