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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

แผงElementsจะแสดงการประกาศคำค้นหา @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. ในแผงElements ให้ตั้งค่าความกว้างของคอนเทนเนอร์เป็น 500px องค์ประกอบ p จะปรากฏขึ้น

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

   

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

   

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

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

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

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

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

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

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