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

โซเฟีย เอมิเลียโนวา
Sofia Emelianova
GitHub

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

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

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

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

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

GRid

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

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

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

การวางซ้อนตารางกริด

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

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

ตารางกริดย่อย

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

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

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

การวางซ้อนตารางกริดย่อย

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

Flex

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

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

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

การวางซ้อน Flex

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

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

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

ค้นพบโฆษณาในตัวอย่างต่อไปนี้

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

ป้ายโฆษณา

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

Scroll Snap

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

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

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

การวางซ้อน Scroll Snap

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

คอนเทนเนอร์

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

ป้ายสื่อจะเปิดขึ้นในการตั้งค่าป้ายและแสดงข้างองค์ประกอบวิดีโอ

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