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

เปิด/ปิดการวางซ้อนต่างๆ และเพิ่มความเร็วในการไปยังส่วนต่างๆ ของแผนผัง 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 ข้างองค์ประกอบนั้นและสังเกตการซ้อนทับ

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

พับ

องค์ประกอบ 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 ที่แยกกันและนำเสนอร่วมกันได้ องค์ประกอบเนื้อหาของช่องจะมีป้าย ink_selectionslot อยู่ข้างๆ ซึ่งทำหน้าที่เป็นลิงก์ไปยังช่องที่เกี่ยวข้อง

ค้นพบป้าย ink_selectionslot ในตัวอย่างต่อไปนี้

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

เลเยอร์บน

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

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

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

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

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

สื่อ

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

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