הפנייה לתגים

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

תפריט 'הגדרות התגים'.

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

הצגת המקור

התג view-source מופיע ליד התג <html> בשורש של דף ה-HTML. לוחצים עליו כדי לראות את המקור של הדף בחלונית מקורות.

התג &#39;צפייה במקור&#39;.

התג הזה מספק תהליך עבודה חלופי לאפשרות הצגת מקור הדף בתפריט ההקשר של הדף ב-Chrome (לחיצה ימנית):

  1. ב-Chrome, לוחצים לחיצה ימנית על דף > בדיקה.
  2. בחלונית Elements (רכיבים), לוחצים על התג view-source לצד התג <html>.
  3. בודקים את מקור הדף בחלונית מקורות.

תצוגת רשת

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

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

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

שכבת-על של רשת.

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

במאמר בדיקת רשת CSS מוסבר איך לנפות באגים בפריסת רשת.

Subgrid

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

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

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

שכבת-על של רשת משנה.

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

שרירים של סלע

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

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

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

שכבת-על Flex.

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

במאמר בדיקה וניפוי באגים ב-CSS flexbox מוסבר איך לנפות באגים בפריסות גמישות.

כלי DevTools יכול לזהות חלק ממסגרות המודעות ולתייג אותן. למסגרות כאלה יש תגים ad לידן.

המודעה שמוצגת בתצוגה המקדימה הבאה:

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

תג לסימון מודעות.

אי אפשר ללחוץ על התג ad, אבל אם מעבירים מעליו את העכבר, מופיע הסבר קצר שמספק הקשר לגבי הסיבה לכך שהרכיב זוהה כמודעה, למשל:

הסבר קצר של תג לסימון מודעות.

  • היסטוריית הסקריפט: אילו סקריפטים היו מעורבים ביצירת הרכיב.
  • כללים של רשימת מסננים: הכלל הספציפי מרשימת מסננים (לדוגמה, EasyList) שתאם לרכיב או למשאב שהוא טען.

אפשר גם להשתמש בכרטיסייה Rendering כדי להדגיש מסגרות של מודעות באדום.

גלילה

רכיב HTML הוא מאגר גלילה אם מאפיין ה-CSS‏ overflow שלו מוגדר ל-scroll או ל-auto כשיש מספיק תוכן שגורם להצפה. לצד רכיבים כאלה מופיעים תגים scroll.

תג גלילה בצומת של עץ DOM.

גלילה עם נקודות עצירה (scroll-snap)

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

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

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

שכבת העל של הגלילה-הצמדה.

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

מאגר

רכיב HTML הוא מאגר אם יש לו את מאפיין ה-CSS‏ container-type. לצד רכיבים כאלה מופיעים תגים container שמאפשרים להפעיל או להשבית את שכבות העל המתאימות.

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

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

שכבת-העל של המאגר.

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

במאמר בדיקה וניפוי באגים של שאילתות CSS של מאגרי תגים מוסבר איך מנפים באגים בשאילתות של מאגרי תגים.

משבצת

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

בתצוגה המקדימה הבאה אפשר לראות את התג slot:

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

שכבה עליונה

התג הזה עוזר לכם להבין את המושג שכבת העל ולראות אותו. השכבה העליונה מעבדת תוכן מעל כל השכבות האחרות, ללא קשר ל-z-index. כשפותחים רכיב <dialog> באמצעות השיטה .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>. הקונטיינר והתג בשכבה העליונה.
  4. כדי לחזור לרכיב <dialog>, לוחצים על התג reveal שליד הרכיב או על ::backdrop שלו.

מדיה

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

תג המדיה מופעל בהגדרות התגים ומוצג לצד רכיב הסרטון.

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

חלון קופץ

חלון קופץ הוא כל אלמנט עם מאפיין popover, והוא שימושי למגוון רחב של דפוסים אינטראקטיביים, כולל תיאורי כלים, התראות, הודעות קצרות ועוד. לצד רכיבים כאלה מופיעים תגים popover.

התג הזה מחליף את התג top-layer שמופיע לידו, שמקשר לרכיבים המתאימים בקונטיינר #top-layer.

בתצוגה המקדימה הבאה אפשר לראות את התג popover:

  1. בתצוגה המקדימה, לוחצים על החלפת מצב של חלון קופץ.
  2. בודקים את הבועה שמופיעה.

  3. בעץ ה-DOM, לוחצים על התג popover לצד הרכיב <div popover>. בחלונית Elements מוצג התג top-layer.

    התג בחלון הקופץ לצד הרכיב עם מאפיין החלון הקופץ.

  4. פועלים לפי השלבים בקטע `שכבה עליונה.

מידע נוסף זמין גם בכתובת https://web.dev/learn/css/popover-and-dialog.

סגנון התחלתי

הכלל@starting-style מגדיר את הסגנונות הראשוניים של רכיב לפני שהוא מוצג בדף. המאפיין הזה נדרש לרכיבים שמונפשים מ-display: none, כי הם צריכים מצב שממנו הם יונפשו. לצד רכיבים כאלה מופיעים תגים starting-style.

התג הזה מחליף את הסגנונות בכלל @starting-style, כדי שתוכלו לראות את האנימציה בפעולה.

בתצוגה המקדימה הבאה אפשר לראות את התג starting-style:

  1. בתצוגה המקדימה, לוחצים על פתיחת חלון קופץ.
  2. בודקים את הבועה שמופיעה.

  3. בעץ ה-DOM, מחליפים את מצב התג starting-style לצד הרכיב <div popover>.

    התג של סגנון ההתחלה לצד הרכיב עם הכלל ‎ @starting-style.

  4. אפשר לראות את האנימציה בפעולה ואת הסגנונות שמוחלים בכרטיסייה Elements (רכיבים) > Styles (סגנונות).

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