ข้อมูลอ้างอิงเกี่ยวกับป้าย

เปิด/ปิดการวางซ้อนต่างๆ และเพิ่มความเร็วในการไปยังส่วนต่างๆ ของแผนผัง DOM ด้วยการอ้างอิงป้ายแบบครอบคลุมนี้ในแผงองค์ประกอบ

แสดงหรือซ่อนป้าย

วิธีแสดงหรือซ่อนป้าย

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

แผงองค์ประกอบจะแสดงป้ายที่เลือกถัดจากองค์ประกอบที่เหมาะสมในแผนผัง DOM ส่วนถัดไปจะอธิบายเกี่ยวกับป้ายทั้งหมด

GRid

องค์ประกอบ HTML จะเป็นคอนเทนเนอร์ตารางกริด หากตั้งค่าพร็อพเพอร์ตี้ CSS ของ display เป็น grid หรือ inline-grid องค์ประกอบดังกล่าวจะมีป้าย grid อยู่ข้างๆ ที่สลับการวางซ้อน��ี่เกี่ยวข้อง

สลับการวางซ้อนในตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในแผนผัง DOM ให้คลิกป้าย grid ข้างองค์ประกอบนั้นและสังเกตการซ้อนทับ

การวางซ้อนจะแสดงคอลัมน์ แถว ตัวเลข และช่องว่าง

ดูวิธีแก้ไขข้อบกพร่องของเลย์เอาต์ตารางกริดได้ที่ตรวจสอบตารางกริด CSS

ตารางย่อย

ตารางย่อยคือตารางกริดที่ซ้อนกันซึ่งใช้แทร็กเดียวกันกับตารางกริดหลัก องค์ประกอบคือคอนเทนเนอร์ตารางย่อย หากรายการใดรายการหนึ่งหรือทั้ง 2 อย่างของ grid-template-columns โดยมีการตั้งค่าพร็อพเพอร์ตี้ grid-template-rows เป็น subgrid องค์ประกอบดังกล่าวจะมีป้าย subgrid อยู่ข้างๆ ที่สลับการวางซ้อนที่เกี่ยวข้อง

สลับการวางซ้อนในตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในแผนผัง DOM ให้คลิกป้าย subgrid ข้างองค์ประกอบนั้นและสังเกตการซ้อนทับ

การวางซ้อนจะแสดงคอลัมน์ แถว ตัวเลข และช่���งว่างของตารางย่อย

Flex

องค์ประกอบ HTML จะเป็นคอนเทนเนอร์ Flex หากตั้งค่าคุณสมบัติ CSS ของ display เป็น flex หรือ inline-flex องค์ประกอบดังกล่าวจะมีป้าย flex อยู่ข้างๆ ที่สลับการวางซ้อนที่เกี่ยวข้อง

สลับการวางซ้อนในตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในแผนผัง DOM ให้คลิกป้าย flex ข้างองค์ประกอบนั้นและสังเกตการซ้อนทับ

การวางซ้อนจะแสดงตำแหน่งองค์ประกอบย่อย

ดูวิธีแก้ไขข้อบกพร่องของเลย์เอาต์ Flex ได้ที่ตรวจสอบและแก้ไขข้อบกพร่องของ CSS Flexbox

โฆษณา

เครื่องมือสำหรับนักพัฒนาเว็บจะตรวจจับเฟรมโฆษณาบางส่วนและติดแท็กได้ เฟรมดังกล่าวมีป้าย ad อยู่ข้างๆ

สำรวจโฆษณาในหน้าตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในแผนผัง DOM ให้หาองค์ประกอบที่มีป้าย ad อยู่ข้างๆ

ป้าย ad คลิกไม่ได้ แต่คุณสามารถใช้แท็บการแสดงผลเพื่อไฮไลต์เฟรมโฆษณาเป็นสีแดงได้

เลื่อนสแนป

องค์ประกอบ HTML จะเป็นคอนเทนเนอร์แบบเลื่อน หากตั้งค่าคุณสมบัติ CSS ของ overflow เป็น scroll หรือ auto เมื่อมีเนื้อหาเพียงพอที่จะทำให้เกิดส่วนเกิน คอนเทนเนอร์แบบเลื่อนอาจมีพร็อพเพอร์ตี้ CSS ที่กำหนดค่าจุดสแนปได้ องค์ประกอบดังกล่าวจะมีป้าย scroll-snap อยู่ข้างๆ ที่สลับการวางซ้อนที่เกี่ยวข้อง

สลับการวางซ้อนในตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในโครงสร้าง DOM ให้คลิกป้าย scroll-snap ข้างองค์ประกอบ
3. ลองเลื่อนองค์ประกอบไปทางขวาและสังเกตการซ้อนทับ

การวางซ้อนจะแสดงตำแหน่งขององค์ประกอบและจุดสแนป

คอนเทนเนอร์

องค์ประกอบ HTML คือคอนเทนเนอร์หากมีพร็อพเพอร์ตี้ CSS container-type องค์ประกอบดังกล่าวจะมีป้าย container อยู่ข้างๆ ที่สลับการวางซ้อนที่เกี่ยวข้อง

สลับการวางซ้อนในตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในโครงสร้าง DOM ให้คลิกป้าย container ข้างองค์ประกอบ
3. ลองปรับขนาดองค์ประกอบโดยลากมุมขวาล่างและสังเกตการเปลี่ยนแปลงเลย์เอาต์และการวางซ้อน

การวางซ้อนจะแสดงตำแหน่งองค์ประกอบย่อย

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

ช่อง

องค์ประกอบ HTML <slot> คือตัวยึดตำแหน่งที่คุณสามารถใส่เนื้อหาของตัวเองได้ เมื่อใช้ร่วมกับองค์ประกอบ <template> แล้ว <slot> จะช่วยให้คุณสร้างแผนผัง DOM ที่แยกกันและนำเสนอร่วมกันได้ องค์ประกอบเนื้อหาของช่องจะมีป้าย slot อยู่ข้างๆ ซึ่งจะแสดงเป็นลิงก์ไปยังช่องที่เกี่ยวข้อง

พบกับป้าย slot ในหน้าตัวอย่างต่อไปนี้

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในโครงสร้าง DOM ให้คลิกป้าย slot ข้างองค์ประกอบเพื่อค้นหาช่องที่เกี่ยวข้อง
3. กลับไปยังเนื้อหาของสล็อตโดยคลิกป้าย reveal

เลเยอร์บน

ป้ายนี้ช่วยให้คุณเข้าใจแนวคิดของเลเยอร์บนสุด และเห็นภาพเลเยอร์ดังกล่าว เลเยอร์บนสุดจะแสดงเนื้อหาทับเลเยอร์อื่นๆ ทั้งหมด ไม่ว่าจะเป็น z-index เมื่อคุณเปิดองค์ประกอบ <dialog> โดยใช้เมธอด .showModal() เบราว์เซอร์จะวางองค์ประกอบนั้นไว้ในเลเยอร์บนสุด

แผงองค์ประกอบจะเพิ่มคอนเทนเนอร์ #top-layer ในแผนผัง DOM หลังแท็กปิด </html> เพื่อช่วยให้คุณเห็นองค์ประกอบของเลเยอร์ระดับบนสุดได้

องค์ประกอบเลเยอร์ด้านบนมีป้าย top-layer (N) อยู่ข้างๆ โดยที่ N คือหมายเลขดัชนีขององค์ประกอบ ป้ายคือลิงก์ไปยังองค์ประกอบที่เกี่ยวข้องในคอนเทนเนอร์ #top-layer

พบกับป้าย top-layer (N) ในหน้าตัวอย่างต่อไปนี้

1. ในตัวอย่าง ให้คลิกเปิดกล่องโต้ตอบ
2. ตรวจสอบกล่องโต้ตอบ
3. ในโครงสร้าง DOM ให้คลิกป้าย top-layer (1) ข้างองค์ประกอบ <dialog> แผงองค์ประกอบจะนำคุณไปยังองค์ประกอบที่เกี่ยวข้องในคอนเทนเนอร์ #top-layer หลังแท็กปิด </html>
4. กลับไปยังองค์ประกอบ <dialog> โดยคลิกป้าย reveal ถัดจากองค์ประกอบหรือ ::backdrop

สื่อ

ป้าย media จะปิดอยู่โดยค่าเริ่มต้น เมื่อเปิด ปุ่มนี้จะปรากฏถัดจากองค์ประกอบ <audio> และ <video> คลิกป้ายนี้เพื่อเปิดแผงสื่อและแก้ไขข้อบกพร่องของสื่อ

ดูข้อมูลเพิ่มเติมได้��ี่แก้ไขข้อบกพร่องของมีเดียเพลเยอร์ด้วยแผงสื่อ