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

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub หน้าแรก

คู่มือนี้จะแสดงวิธีตรวจสอบและแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ 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) จะหายไปจากหน้าเว็บเนื่องจากไม่ตรงตามเกณฑ์การค้นหา