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

Sofia Emelianova

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

หมายเหตุ: การค้นหาด้วยคอนเทนเนอร์ CSS เป็นฟีเจอร์ทดลอง หากต้องการเปิดการสนับสนุนในเครื่องมือสำหรับนักพัฒนาเว็บ ให้ตั้งค่าการทดสอบ Enable CSS Container Queries เป็น Enabled ในส่วน chrome://flags ไม่เช่นนั้น ตัวอย่างครั้งถัดไปจะไม่ทํางาน

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

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

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

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

ช่อง

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

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

1. ตรวจสอบองค์ประกอบในตัวอย่าง
2. ในโครงสร้าง DOM ให้คลิกป้าย slot ข้างองค์ประกอบเพื่อค้นหาช่องที่เกี่ยวข้อง
   ประเด็นหลัก: ป้าย slot มีป้าย reveal ที่จับคู่ไว้ซึ่งจะพาคุณกลับมา
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>
   ประเด็นหลัก: ป้าย top-layer (N) มีป้าย reveal ที่จับคู่ไว้ซึ่งจะพาคุณกลับมา
4. กลับไปยังองค์ประกอบ <dialog> โดยคลิกป้าย reveal ถัดจากองค์ประกอบหรือ ::backdrop

สื่อ

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

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