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

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

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

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

1. เปิด DevTools
2. คลิกขวาที่องค์ประกอบในแผนผัง DOM แล้วเลือกป้าย 1 ป้ายขึ้นไปในเมนูย่อยการตั้งค่าป้าย

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

ดูแหล่งที่มา

ป้าย view-source จะอยู่ข้างแท็ก <html> ที่รูทของหน้า HTML คลิกป้ายนี้เพื่อดูแหล่งที่มาของหน้าในแผงแหล่งที่มา

ป้ายนี้มีเวิร์กโฟลว์ทางเลือกแทนตัวเลือกดูแหล่งที่มาของหน้า ในเมนูบริบทของหน้า (คลิกขวา) ใน Chrome ดังนี้

1. ใน Chrome ให้คลิกขวา > ตรวจสอบ หน้า
2. ในแผงองค์ประกอบ ให้คลิกป้าย view-source ข้างแท็ก <html>
3. ตรวจสอบแหล่งที่มาของหน้าในแผงแหล่งที่มา

กริด

องค์ประกอบ 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 จะเป็น คอนเทนเนอร์แบบยืดหยุ่น หากตั้งค่าพร็อพเพอร์ตี้ display CSS เป็น flex หรือ inline-flex องค์ประกอบดังกล่าวจะมีป้าย flex อยู่ข้างๆ ซึ่งจะสลับการวางซ้อนที่เกี่ยวข้อง

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

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

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

ดูวิธีแก้ปัญหาเลย์เอาต์แบบยืดหยุ่นได้ที่ ตรวจสอบและแก้ปัญหา Flexbox CSS

โฆษณา

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

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

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

ป้าย ad คลิกไม่ได้ แต่หากคุณวางเมาส์เหนือป้ายนี้ คุณจะเห็นเคล็ดลับเครื่องมือที่ให้บริบทเกี่ยวกับเหตุผลที่ระบบระบุองค์ประกอบเป็นโฆษณา เช่น

• ลำดับชั้นของสคริปต์: สคริปต์ที่เกี่ยวข้องกับการสร้างองค์ประกอบ
• กฎรายการตัวกรอง: กฎเฉพาะจากรายการตัวกรอง (เช่น EasyList) ที่ตรงกับองค์ประกอบหรือทรัพยากรที่โหลด

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

เลื่อน

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

Scroll-snap

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

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

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

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

คอนเทนเนอร์

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

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

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

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

ดูวิธีแก้ปัญหาการค้นหาคอนเทนเนอร์ได้ที่ ตรวจสอบและแก้ปัญหาการค้นหาคอนเทนเนอร์ CSS

สล็อต

องค์ประกอบ HTML <slot> เป็นตัวยึดตำแหน่งที่คุณสามารถใส่เนื้อหาของคุณเองได้ <slot> ร่วมกับองค์ประกอบ <template> ช่วยให้คุณสร้างแผนผัง 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> คลิกป้ายนี้เพื่อเปิดแผงสื่อ และแก้ปัญหาเกี่ยวกับสื่อ

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

ป๊อปอัป

ป๊อปอัปคือองค์ประกอบใดก็ตามที่มีแอตทริบิวต์ popover และมีประโยชน์สำหรับรูปแบบการโต้ตอบที่หลากหลาย รวมถึงคำแนะนำเครื่องมือ การแจ้งเตือน การแจ้งเตือนแบบสั้น และอื่นๆ องค์ประกอบดังกล่าวจะมีป้าย popover อยู่ข้างๆ

ป้ายนี้จะสลับป้าย top-layer ที่อยู่ข้างๆ ซึ่งลิงก์ไปยังองค์ประกอบที่เกี่ยวข้องในคอนเทนเนอร์ #top-layer

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

1. ในตัวอย่าง ให้คลิกสลับป๊อปอัป
2. ตรวจสอบป๊อปอัปที่ปรากฏขึ้น

3. ในแผนผัง DOM ให้คลิกป้าย popover ข้างองค์ประกอบ <div popover> แผงองค์ประกอบ จะแสดงป้าย top-layer

   

4. ทำตามขั้นตอนในส่วนเลเยอร์บน

ดูข้อมูลเพิ่มเติมได้ที่ https://web.dev/learn/css/popover-and-dialog

Starting-style

กฎ@starting-style rule กำหนดสไตล์เริ่มต้นขององค์ประกอบก่อนที่จะแสดงผลในหน้า กฎนี้จำเป็นสำหรับองค์ประกอบที่ เคลื่อนไหวจาก display: none เนื่องจากองค์ประกอบดังกล่าวต้องมีสถานะเริ่มต้นเพื่อใช้ในการเคลื่อนไหว องค์ประกอบดังกล่าวจะมีป้าย starting-style อยู่ข้างๆ

ป้ายนี้จะสลับสไตล์ในกฎ @starting-style เพื่อให้คุณเห็นภาพเคลื่อนไหวที่กำลังทำงาน

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

1. ในตัวอย่าง ให้คลิกเปิดป๊อปอัป
2. ตรวจสอบป๊อปอัปที่ปรากฏขึ้น

3. ในแผนผัง DOM ให้สลับป้าย starting-style ข้างองค์ประกอบ <div popover>

   

4. สังเกตภาพเคลื่อนไหวที่กำลังทำงานและสไตล์ที่ใช้ในแท็บองค์ประกอบ > สไตล์

ดูข้อมูลเพิ่มเติมได้ที่ การเคลื่อนไหวของป๊อปอัป

Custom-element

องค์ประกอบ HTML ที่กำหนดเอง ซึ่งระบุด้วยชื่อแท็กที่มีเครื่องหมายยัติภังค์หรือแอตทริบิวต์ is="..." สำหรับองค์ประกอบในตัวที่กำหนดเองจะมีป้าย custom-element อยู่ข้างๆ ในแผนผัง DOM

คลิกป้ายเพื่อไปยังโค้ดที่เกี่ยวข้องในแผงแหล่งที่มา