สลับการวางซ้อนต่างๆ และเร่งการนำทางในแผนผัง DOM ด้วยข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับป้ายในแผงองค์ประกอบ
แสดงหรือซ่อนป้าย
วิธีแสดงหรือซ่อนป้ายบางรายการ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกขวาที่องค์ประกอบในแผนผัง DOM แล้วเลือกป้ายอย่างน้อย 1 ป้ายในเมนูย่อยการตั้งค่าป้าย
แผงองค์ประกอบจะแสดงป้ายที่เลือกไว้ข้างองค์ประกอบที่เหมาะสมในแผนผัง DOM ส่วนถัดไปจะอธิบายป้ายแต่ละป้าย
ดูแหล่งที่มา
ป้าย view-source อยู่ข้างแท็ก <html> ที่รูทของหน้า HTML คลิกเพื่อดูแหล่งที่มาของหน้าเว็บในแผงแหล่งที่มา
ป้ายนี้มีเวิร์กโฟลว์ทางเลือกสำหรับตัวเลือกดูแหล่งที่มาของหน้าเว็บในเมนูบริบทของหน้าเว็บใน Chrome (คลิกขวา) ดังนี้
- ใน Chrome ให้คลิกขวา > ตรวจสอบหน้าเว็บ
- ในแผงองค์ประกอบ ให้คลิกป้าย
view-sourceข้างแท็ก<html> - ตรวจสอบแหล่งที่มาของหน้าในแผงแหล่งที่มา
GRid
องค์ประกอบ HTML จะเป็นคอนเทนเนอร์กริดหากตั้งค่าพร็อพเพอร์ตี้ CSS display เป็น grid หรือ inline-grid องค์ประกอบดังกล่าวจะมีป้าย grid อยู่ข้างๆ ซึ่งจะสลับภาพซ้อนที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
gridข้างองค์ประกอบ แล้วสังเกตภาพซ้อน
ภาพซ้อนทับจะแสดงคอลัมน์ แถว หมายเลข และช่องว่าง
ดูวิธีแก้ไขข้อบกพร่องของเลย์เอาต์กริดได้ที่ตรวจสอบกริด CSS
ตารางย่อย
กริดย่อยคือกริดย่อยที่ใช้แทร็กเดียวกันกับกริดหลัก องค์ประกอบจะเป็นคอนเทนเนอร์ของกริดย่อยหากตั้งค่าพร็อพเพอร์ตี้ grid-template-columns หรือ grid-template-rows อย่างใดอย่างหนึ่งหรือทั้ง 2 อย่างเป็น subgrid องค์ประกอบดังกล่าวจะมีป้าย subgrid อยู่ข้างๆ ซึ่งจะสลับภาพซ้อนที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
subgridข้างองค์ประกอบ แล้วสังเกตภาพซ้อน
โดยภาพซ้อนทับจะแสดงคอลัมน์ แถว หมายเลข และช่องว่างของตารางกริดย่อย
พับ
องค์ประกอบ HTML จะเป็นคอนเทนเนอร์ Flex หากตั้งค่าพร็อพเพอร์ตี้ CSS display เป็น flex หรือ inline-flex องค์ประกอบดังกล่าวจะมีป้าย flex อยู่ข้างๆ ซึ่งจะสลับภาพซ้อนที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
flexข้างองค์ประกอบ แล้วสังเกตภาพซ้อน
โดยภาพซ้อนทับจะแสดงตำแหน่งขององค์ประกอบย่อย
ดูวิธีแก้ไขข้อบกพร่องของเลย์เอาต์แบบยืดหยุ่นได้ที่ตรวจสอบและแก้ไขข้อบกพร่องของ CSS Flexbox
โฆษณา
DevTools สามารถตรวจหาเฟรมโฆษณาบางรายการและติดแท็กได้ โดยเฟรมดังกล่าวจะมีป้าย ad อยู่ข้างๆ
ดูโฆษณาในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้ค้นหาองค์ประกอบที่มีป้าย
adอยู่ข้างๆ
ad ป้ายไม่สามารถคลิกได้ แต่คุณใช้แท็บการแสดงผลเพื่อไฮไลต์เฟรมโฆษณาเป็นสีแดงได้
เลื่อน
องค์ประกอบ HTML จะเป็นคอนเทนเนอร์เลื่อนหากตั้งค่าพร็อพเพอร์ตี้ CSS overflow เป็น scroll หรือ auto เมื่อมีเนื้อหามากพอที่จะทำให้เกิดการล้น โดยองค์ประกอบดังกล่าวจะมีป้าย scroll อยู่ข้างๆ
Scroll-snap
คอนเทนเนอร์เลื่อนมีพร็อพเพอร์ตี้ CSS ที่กำหนดค่าจุดสแนปได้ องค์ประกอบดังกล่าวจะมีป้าย scroll-snap อยู่ข้างๆ ซึ่งจะสลับภาพซ้อนที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
scroll-snapข้างองค์ประกอบ - ลองเลื่อนองค์ประกอบไปทางขวาและสังเกตการซ้อนทับ
การซ้อนทับจะแสดงตำแหน่งขององค์ประกอบและจุดสแนป
คอนเทนเนอร์
องค์ประกอบ HTML จะเป็นคอนเทนเนอร์หากมีพร็อพเพอร์ตี้ CSS container-type องค์ประกอบดังกล่าวจะมีป้าย container อยู่ข้างๆ ซึ่งจะสลับภาพซ้อนที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
containerข้างองค์ประกอบ - ลองปรับขนาดองค์ประกอบโดยการลากมุมขวาล่าง แล้วสังเกตการเปลี่ยนแปลงเลย์เอาต์และการซ้อนทับ
โดยภาพซ้อนทับจะแสดงตำแหน่งขององค์ประกอบย่อย
ดูวิธีแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ได้ที่ตรวจสอบและแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ CSS
สล็อต
<slot>องค์ประกอบ HTML เป็นตัวยึดตำแหน่งที่คุณสามารถใส่เนื้อหาของคุณเองได้ <slot> ช่วยให้คุณสร้างแผนผัง DOM แยกกันและนำเสนอร่วมกันได้เมื่อใช้ร่วมกับองค์ประกอบ <template> องค์ประกอบเนื้อหาของช่องมีป้ายslot อยู่ข้างๆ ซึ่งทำหน้าที่เป็นลิงก์ไปยังช่องที่เกี่ยวข้อง
ดูป้ายslot ในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
slotข้างองค์ประกอบเพื่อค้นหาสล็อตที่เกี่ยวข้อง
- กลับไปที่เนื้อหาของสล็อตโดยคลิกป้าย
reveal
เลเยอร์บน
ป้ายนี้ช่วยให้คุณเข้าใจแนวคิดของเลเยอร์บนสุดและเห็นภาพ เลเยอร์บนสุดจะแสดงเนื้อหาเหนือเลเยอร์อื่นๆ ทั้งหมด ไม่ว่าจะเป็นz-index ใดก็ตาม เมื่อคุณเปิดองค์ประกอบ <dialog> โดยใช้เมธอด .showModal() เบราว์เซอร์จะวางองค์ประกอบนั้นไว้ในเลเยอร์บนสุด
แผงองค์ประกอบจะเพิ่มคอนเทนเนอร์ #top-layer ลงในแผนผัง DOM หลังจากแท็กปิด </html> เพื่อช่วยให้คุณเห็นภาพองค์ประกอบเลเยอร์บนสุด
องค์ประกอบเลเยอร์บนสุดจะมีป้าย top-layer (N) อยู่ข้างๆ โดย N คือหมายเลขดัชนีขององค์ประกอบ ป้ายเป็นลิงก์ไปยังองค์ประกอบที่เกี่ยวข้องในคอนเทนเนอร์ #top-layer
ดูป้ายtop-layer (N) ในตัวอย่างต่อไปนี้
- คลิกเปิดกล่องโต้ตอบในตัวอย่าง
- ตรวจสอบกล่องโต้ตอบ
- ในแผนผัง DOM ให้คลิกป้าย
top-layer (1)ข้างองค์ประกอบ<dialog>แผงองค์ประกอบจะนำคุณไปยังองค์ประกอบที่เกี่ยวข้องในคอนเทนเนอร์#top-layerหลังจากแท็กปิด</html>
- กลับไปที่องค์ประกอบ
<dialog>โดยคลิกป้ายrevealข้างองค์ประกอบหรือ::backdropขององค์ประกอบ
สื่อ
ป้ายmediaจะปิดอยู่โดยค่าเริ่มต้น เมื่อเปิด จะปรากฏข้างองค์ประกอบ <audio> และ <video> คลิกป้ายนี้เพื่อเปิดแผงสื่อและแก้ไขข้อบกพร่องของสื่อ
ดูข้อมูลเพิ่มเติมได้ที่แก้ไขข้อบกพร่องของโปรแกรมเล่นสื่อด้วยแผงสื่อ
ป๊อปอัป
ป๊อปโอเวอร์คือองค์ประกอบใดก็ตามที่มีแอตทริบิวต์ popover และมีประโยชน์สำหรับรูปแบบการโต้ตอบที่หลากหลาย ซึ่งรวมถึงเคล็ดลับเครื่องมือ การแจ้งเตือน ข้อความแจ้ง และอื่นๆ โดยองค์ประกอบดังกล่าวจะมีป้าย popover อยู่ข้างๆ
ป้ายนี้จะสลับป้าย top-layer ที่อยู่ข้างๆ ซึ่งลิงก์ไปยังองค์ประกอบที่เกี่ยวข้องในคอนเทนเนอร์ #top-layer
ดูpopoverป้ายได้ในตัวอย่างต่อไปนี้
- คลิกสลับป๊อปโอเวอร์ในตัวอย่าง
- ตรวจสอบป๊อปโอเวอร์ที่ปรากฏขึ้น
ในแผนผัง DOM ให้คลิกป้าย
popoverข้างองค์ประกอบ<div popover>แผงองค์ประกอบจะแสดงป้ายtop-layer
ทำตามขั้นตอนในส่วน`เลเยอร์บนสุด
ดูข้อมูลเพิ่มเติมได้ที่ https://web.dev/learn/css/popover-and-dialog
รูปแบบการเริ่มต้น
@starting-styleกฎจะกำหนดสไตล์เริ่มต้นในองค์ประกอบก่อนที่จะแสดงในหน้า ซึ่งจำเป็นสำหรับองค์ประกอบที่เคลื่อนไหวเข้าจาก display: none เนื่องจากต้องมีสถานะที่จะใช้เคลื่อนไหวเข้า โดยองค์ประกอบดังกล่าวจะมีป้าย starting-style อยู่ข้างๆ
ป้ายนี้จะสลับสไตล์ในกฎ @starting-style เพื่อให้คุณเห็นภาพเคลื่อนไหวที่ทำงาน
ดูstarting-styleป้ายได้ในตัวอย่างต่อไปนี้
- คลิกเปิดป๊อปโอเวอร์ในตัวอย่าง
- ตรวจสอบป๊อปโอเวอร์ที่ปรากฏขึ้น
ในแผนผัง DOM ให้สลับป้าย
starting-styleข้างองค์ประกอบ<div popover>
ดูภาพเคลื่อนไหวที่ทำงานและสไตล์ที่ใช้ในแท็บองค์ประกอบ > รูปแบบ
ดูข้อมูลเพิ่มเติมได้ที่การสร้างภาพเคลื่อนไหวให้กับป๊อปโอเวอร์