เปิด/ปิดการซ้อนทับต่างๆ และเร่งการนำทางในแผนผัง DOM ด้วยข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับป้ายในแผงองค์ประกอบ
แสดงหรือซ่อนป้าย
วิธีแสดงหรือซ่อนป้ายบางป้าย
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกขวาที่องค์ประกอบในแผนผัง DOM แล้วเลือกป้ายอย่างน้อย 1 ป้ายในเมนูย่อยการตั้งค่าป้าย
แผงองค์ประกอบ จะแสดงป้ายที่เลือกไว้ข้างองค์ประกอบที่เหมาะสมในแผนผัง DOM ส่วนถัดไปจะอธิบายป้ายแต่ละป้าย
ดูแหล่งที่มา
ป้าย view-source จะอยู่ข้างแท็ก <html> ที่รูทของหน้า HTML คลิกป้ายนี้เพื่อดูแหล่งที่มาของหน้าในแผงแหล่งที่มา
ป้ายนี้มีเวิร์กโฟลว์ทางเลือกแทนตัวเลือกดูแหล่งที่มาของหน้า ในเมนูตามบริบท (คลิกขวา) ของหน้าใน Chrome ดังนี้
- ใน Chrome ให้คลิกขวา > ตรวจสอบ หน้า
- ในแผงองค์ประกอบ ให้คลิกป้าย
view-sourceข้างแท็ก<html> - ตรวจสอบแหล่งที่มาของหน้าในแผงแหล่งที่มา
กริด
องค์ประกอบ HTML จะเป็น คอนเทนเนอร์กริด หากตั้งค่าพร็อพเพอร์ตี้ CSS display เป็น grid หรือ inline-grid องค์ประกอบดังกล่าวจะมีป้าย grid อยู่ข้างๆ ซึ่งจะสลับการซ้อนทับที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
gridข้างองค์ประกอบ แล้วสังเกตการซ้อนทับ
การซ้อนทับจะแสดงคอลัมน์ แถว หมายเลข และช่องว่าง
ดูวิธีแก้ไขข้อบกพร่องของเลย์เอาต์กริดได้ที่ ตรวจสอบกริด CSS
กริดย่อย
กริดย่อย subgrid คือกริดย่อยที่ซ้อนกันซึ่งใช้แทร็กเดียวกันกับกริดระดับบน องค์ประกอบจะเป็นคอนเทนเนอร์กริดย่อยหากตั้งค่าพร็อพเพอร์ตี้ grid-template-columns หรือ grid-template-rows อย่างน้อย 1 รายการเป็น subgrid องค์ประกอบดังกล่าวจะมีป้าย subgrid อยู่ข้างๆ ซึ่งจะสลับการซ้อนทับที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
subgridข้างองค์ประกอบ แล้วสังเกตการซ้อนทับ
การซ้อนทับจะแสดงคอลัมน์ แถว หมายเลข และช่องว่างของกริดย่อย
พับ
องค์ประกอบ HTML จะเป็น คอนเทนเนอร์แบบยืดหยุ่น หากตั้งค่าพร็อพเพอร์ตี้ display CSS เป็น flex หรือ inline-flex องค์ประกอบดังกล่าวจะมีป้าย flex อยู่ข้างๆ ซึ่งจะสลับการซ้อนทับที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
flexข้างองค์ประกอบ แล้วสังเกตการซ้อนทับ
การซ้อนทับจะแสดงตำแหน่งขององค์ประกอบย่อย
ดูวิธีแก้ไขข้อบกพร่องของเลย์เอาต์แบบยืดหยุ่นได้ที่ ตรวจสอบและแก้ไขข้อบกพร่องของ CSS Flexbox
โฆษณา
เครื่องมือสำหรับนักพัฒนาเว็บสามารถตรวจหาเฟรมโฆษณาบางรายการและติดแท็กเฟรมเหล่านั้นได้ เฟรมดังกล่าวจะมีป้าย ad อยู่ข้างๆ
ค้นพบโฆษณาในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้ค้นหาองค์ประกอบที่มีป้าย
adอยู่ข้างๆ
ป้าย ad คลิกไม่ได้ แต่หากคุณวางเมาส์เหนือป้ายดังกล่าว คุณจะเห็นคำแนะนำเครื่องมือที่ให้ข้อมูลบริบทเกี่ยวกับเหตุผลที่ระบบระบุองค์ประกอบเป็นโฆษณา เช่น
- ลำดับชั้นของสคริปต์: สคริปต์ที่เกี่ยวข้องกับการสร้างองค์ประกอบ
- กฎรายการตัวกรอง: กฎเฉพาะจากรายการตัวกรอง (เช่น
EasyList) ที่ตรงกับองค์ประกอบหรือทรัพยากรที่โหลด
นอกจากนี้ คุณยังใช้แท็บการแสดงผล เพื่อไฮไลต์เฟรมโฆษณาเป็นสีแดงได้ด้วย
เลื่อน
องค์ประกอบ HTML จะเป็น คอนเทนเนอร์เลื่อน หากตั้งค่าพร็อพเพอร์ตี้ CSS overflow เป็น scroll หรือ auto เมื่อมีเนื้อหามากพอที่จะทำให้เกิดการล้น องค์ประกอบดังกล่าวจะมีป้าย scroll อยู่ข้างๆ
การเลื่อนแบบสแนป
คอนเทนเนอร์เลื่อนอาจมี พร็อพเพอร์ตี้ CSS ที่กำหนดค่าจุดสแนป องค์ประกอบดังกล่าวจะมีป้าย scroll-snap อยู่ข้างๆ ซึ่งจะสลับการซ้อนทับที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
scroll-snapข้างองค์ประกอบ - ลองเลื่อนองค์ประกอบไปทางขวา แล้วสังเกตการซ้อนทับ
การซ้อนทับจะแสดงตำแหน่งขององค์ประกอบและจุดสแนป
คอนเทนเนอร์
องค์ประกอบ HTML จะเป็นคอนเทนเนอร์หากมีพร็อพเพอร์ตี้ CSS container-type องค์ประกอบดังกล่าวจะมีป้าย container อยู่ข้างๆ ซึ่งจะสลับการซ้อนทับที่เกี่ยวข้อง
สลับการซ้อนทับในตัวอย่างต่อไปนี้
- ตรวจสอบองค์ประกอบในตัวอย่าง
- ในแผนผัง DOM ให้คลิกป้าย
containerข้างองค์ประกอบ - ลองปรับขนาดองค์ประกอบโดยลากมุมขวาล่าง แล้วสังเกตการเปลี่ยนแปลงเลย์เอาต์และการซ้อนทับ
การซ้อนทับจะแสดงตำแหน่งขององค์ประกอบย่อย
ดูวิธีแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ได้ที่ ตรวจสอบและแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ CSS
สล็อต
องค์ประกอบ HTML <slot> เป็นตัวยึดตำแหน่งที่คุณสามารถใส่เนื้อหาของคุณเองได้ <slot> ร่วมกับองค์ประกอบ <template> ช่วยให้คุณสร้างแผนผัง DOM แยกกันและแสดงแผนผังเหล่านั้นร่วมกันได้ องค์ประกอบเนื้อหาของสล็อตจะมีป้าย 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>
สังเกตภาพเคลื่อนไหวที่กำลังทำงานและสไตล์ที่ใช้ในแท็บองค์ประกอบ > รูปแบบ
ดูข้อมูลเพิ่มเติมได้ที่การสร้างภาพเคลื่อนไหวของป๊อปอัป