הפנייה לתגים

Sofia Emelianova

אפשר להפעיל שכבות-על שונות ולהאיץ את הניווט בעץ DOM באמצעות ההפניה המקיפה הזו לתגים שבחלונית Elements.

הצגה או הסתרה של תגים

כדי להציג או להסתיר תגים:

1. פותחים את כלי הפיתוח.
2. לוחצים לחיצה ימנית על רכיב בעץ ה-DOM ובוחרים באפשרות Badge settings... (הגדרות תג).
3. מסמנים את התיבות לצד התגים שנבחרו, או מבטלים את הסימון שלהן.

בחלונית Elements מוצגים התגים שנבחרו לצד הרכיבים המתאימים בעץ ה-DOM. בקטעים הבאים נסביר על כל תג.

תצוגת רשת

רכיב HTML הוא מאגר תגים של רשת אם מאפיין ה-CSS שלו display מוגדר ל-grid או ל-inline-grid. ליד רכיבים כאלה יש תגי grid שמשמשים להחלפת מצב של שכבות-העל התואמות.

ניתן להחליף מצב בשכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג grid שלצד הרכיב ובודקים את שכבת-העל.

שכבת-העל מציגה עמודות, שורות, המספרים והרווחים שלהן.

כדי לקבל מידע על ניפוי באגים בפריסת רשת, אפשר לעיין במאמר בדיקת רשת של CSS.

רשת משנה

רשת משנה היא רשת בתצוגת עץ שמשתמשת באותם מסלולים של הרשת הראשית שלה. רכיב הוא קונטיינר של רשת משנה אם אחד מהמאפיינים grid-template-columns או שניהם, grid-template-rows מוגדרים ל-subgrid. ליד רכיבים כאלה יש תגי subgrid שמשמשים להחלפת מצב של שכבות-העל התואמות.

ניתן להחליף מצב בשכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג subgrid שלצד הרכיב ובודקים את שכבת-העל.

שכבת-העל מציגה עמודות, שורות, המספרים והרווחים של רשת משנה.

Flex

רכיב HTML הוא מאגר גמיש אם מאפיין ה-CSS שלו display מוגדר ל-flex או ל-inline-flex. ליד רכיבים כאלה יש תגי flex שמשמשים להחלפת מצב של שכבות-העל התואמות.

ניתן להחליף מצב בשכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג flex שלצד הרכיב ובודקים את שכבת-העל.

בשכבת-העל מוצגים מיקומים של רכיבי צאצא.

כדי ללמוד איך לנפות באגים בפריסות גמישות, אפשר לעיין במאמר בדיקה וניפוי באגים ב-Flexbox ב-CSS.

מודעה

כלי הפיתוח יכולים לזהות חלק ממסגרות של מודעות ולתייג אותן. ליד פריימים כאלה יש 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 הן תכונה ניסיונית. כדי להפעיל את התמיכה בכלי הפיתוח, בקטע chrome://flags, מגדירים את הניסוי Enable CSS Container Queries לערך Enabled. אחרת, התצוגה המקדימה הבאה לא תפעל.

ניתן להחליף מצב בשכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג container ליד הרכיב.
3. כדי לשנות את גודל הרכיב, גוררים את הפינה השמאלית התחתונה שלו ובודקים את השינוי בפריסה ואת שכבת-העל.

בשכבת-העל מוצגים מיקומים של רכיבי צאצא.

כדי ללמוד איך לנפות באגים בשאילתות שקשורות למאגרי תגים, אפשר לעיין במאמר בדיקה וניפוי באגים בשאילתות של מאגר תגים ב-CSS.

משבצת

אלמנט ה-HTML <slot> הוא placeholder שאפשר למלא בתוכן משלכם. בשילוב עם הרכיב <template>, <slot> מאפשר ליצור עצי DOM נפרדים ולהציג אותם יחד. לצד רכיבי התוכן של מיקומי המודעות יש slot תגים שמשמשים כקישורים למיקומי המודעות המתאימים.

התג slot זמין בתצוגה המקדימה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג slot ליד הרכיב כדי לאתר את המשבצת המתאימה.
   נקודה חשובה: לתג slot יש תג reveal צמוד שמחזיר אותך.
3. כדי לחזור לתוכן של מיקום המודעה, לוחצים על התג reveal.

שכבה עליונה

התג הזה עוזר להבין את המושג שכבה עליונה ולהציג אותו באופן חזותי. השכבה העליונה מעבדת את התוכן מעל כל שאר השכבות, ללא קשר ל-z-index. כשפותחים רכיב <dialog> באמצעות ה-method .showModal(), הדפדפן מוסיף אותו לשכבה העליונה.

כדי לעזור לכם להמחיש רכיבים בשכבה העליונה, החלונית Elements מוסיפה קונטיינר #top-layer לעץ ה-DOM אחרי התג הסוגר </html>.

ליד רכיבי השכבה העליונה יש top-layer (N) תגים כאשר N הוא מספר האינדקס של הרכיב. התגים הם קישורים לרכיבים התואמים במאגר #top-layer.

התג top-layer (N) זמין בתצוגה המקדימה:

1. בתצוגה המקדימה, לוחצים על פתיחת תיבת דו-שיח.
2. בודקים את תיבת הדו-שיח.
3. בעץ ה-DOM, לוחצים על התג top-layer (1) לצד הרכיב <dialog>. החלונית Elements מעבירה אתכם לרכיב המתאים במאגר #top-layer אחרי התג הסוגר </html>.
   נקודה חשובה: לתג top-layer (N) יש תג reveal צמוד שמחזיר אותך.
4. כדי לחזור לרכיב <dialog>, לוחצים על התג reveal ליד הרכיב או על ה::backdrop שלו.

מדיה

התג media מושבת כברירת מחדל. כשהאפשרות מופעלת, הוא מופיע לצד הרכיבים <audio> ו-<video>. לוחצים על התג הזה כדי לפתוח את החלונית מדיה ולנפות באגים במדיה.

מידע נוסף זמין במאמר ניפוי באגים בנגני מדיה באמצעות חלונית המדיה.