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

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

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

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

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

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

GRid

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

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

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

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

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

ตารางย่อย

ตารางย่อยคือตารางที่ฝังอยู่ซึ่งใช้แทร็กเดียวกับตารางหลัก เอลิเมนต์จะเป็นคอนเทนเนอร์ตารางกริดย่อยหากตั้งค่าพร็อพเพอร์ตี้ grid-template-columns, grid-template-rows อย่างน้อย 1 รายการเป็น 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 เป็นคอนเทนเนอร์การเลื่อนหากตั้งค่าพร็อพเพอร์ตี้ overflow CSS เป็น scroll หรือ auto เมื่อเนื้อหามีมากพอที่จะทำให้เกิดการเลื่อน องค์ประกอบดังกล่าวจะมีป้าย scroll อยู่ข้างๆ

การสแนปการเลื่อน

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

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