คู่มือนี้จะแสดงวิธีตรวจสอบและแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ CSS ในแผงองค์ประกอบในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
การค้นหาคอนเทนเนอร์ของ CSS ช่วยให้คุณจัดการรูปแบบขององค์ประกอบตามคุณสมบัติคอนเทนเนอร์ระดับบนสุด ความสามารถนี้จะเปลี่ยนแนวคิดของการออกแบบเว็บที่ตอบสนองตามอุปกรณ์จากแบบหน้าเว็บเป็นแบบอิงตามคอนเทนเนอร์
ภาพหน้าจอในคู่มือนี้มาจากหน้าเดโมนี้
สำรวจคอนเทนเนอร์และองค์ประกอบรองลงมา
องค์ประกอบทั้งหมดที่กำหนดให้เป็นคอนเทนเนอร์การค้นหาจะมีป้าย container
อยู่ข้างๆ ในแผงองค์ประกอบ ป้ายสลับการวางซ้อนเส้นประของคอนเทนเนอร์และองค์ประกอบรองลงมา
วิธีสลับการวางซ้อน
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- ในแผงองค์ประกอบ ให้คลิกป้าย
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
รายการแรก
- ในแผงองค์ประกอบ ให้ตั้งค่าความกว้างของคอนเทนเนอร์เป็น
500px
องค์ประกอบp
จะปรากฏขึ้น เลือกองค์ประกอบ
p
ในแผงรูปแบบ คุณจะเห็นการประกาศ@container
พร้อมด้วยลิงก์ไปยังคอนเทนเนอร์หลักarticle.card
ตั้งค่าความกว้างมากกว่า
600px
แล้วเลือกองค์ประกอบที่ได้รับผลกระทบ สังเกตการประกาศ@container
รายการที่ติดตั้งใช้งานเลย์เอาต์แนวนอน
ค้นหาองค์ประกอบคอนเทนเนอร์
หากต้องการค้นหาและเลือกองค์ประกอบคอนเทนเนอร์ที่ทำให้การค้นหามีผล ให้วางเมาส์เหนือชื่อองค์ประกอบเหนือการประกาศ @container
เมื่อวางเมาส์เหนือองค์ประกอบ ชื่อจะเปลี่ยนเป็นลิงก์ไปยังองค์ประกอบในแผงองค์ประกอบ และแผงรูปแบบจะแสดงพร็อพเพอร์ตี้ที่สืบค้นและค่าปัจจุบัน
แก้ไขการค้นหาคอนเทนเนอร์
หากต้องการแก้ไขข้อบกพร่องของการค้นหา คุณสามารถแก้ไขเป็นการประกาศ CSS อื่นๆ ในแผงรูปแบบตามที่อธิบายไว้ในดูและเปลี่ยน CSS
ในตัวอย่างนี้ ความกว้างของคอนเทนเนอร์คือ 500px
องค์ประกอบย่อหน้า (p
) จะปรากฏในหน้าดังกล่าว
- เลือกองค์ประกอบ
p
ในแผงรูปแบบ คุณจะเห็นการประกาศ@container (inline-size > 400px)
- เปลี่ยน
inline-size
จาก400px
เป็น520px
- องค์ประกอบย่อหน้า (
p
) จะหายไปจากหน้าเว็บเนื่องจากไม่ตรงตามเกณฑ์การค้นหา