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

Sofia Emelianova

Jecelyn Yeen

במדריך הזה נסביר איך בודקים שאילתות של מאגרי CSS ומאתרים בהן באגים בחלונית Elements ב-Chrome DevTools.

שאילתות של קונטיינרים של CSS מאפשרות לבצע שינויים בסגנונות של הרכיב על סמך מאפייני הקונטיינר של ההורה. היכולת הזו משנה את המושג של עיצוב אתר רספונסיבי מבוסס-דף לבוסס-קונטיינר.

צילומי המסך במדריך הזה מגיעים מדף הדגמה הזה.

הצגת קונטיינרים והצאצאים שלהם

לצד כל רכיב שמוגדר כמאגר שאילתות מופיעה התג container בחלונית Elements. התג מפעיל או משבית שכבת-על של קווים מקווקווים של המאגר והצאצאים שלו.

כדי להציג או להסתיר את שכבת-העל:

1. פותחים את כלי הפיתוח.
2. בחלונית Elements (רכיבים), לוחצים על התג container לצד הרכיב שמוגדר כמאגר.

בדוגמה הזו, המאפיין container-type: inline-size מגדיר את רכיב המארז. הצאצאים יכולים לשלוח שאילתות למאפיין בתוך השורה (ציר אופקי) ולשנות את הסגנונות שלהם בהתאם לרוחב של המאגר.

בדיקת שאילתות של קונטיינרים

בחלונית Elements מוצגות הצהרות על שאילתות @container כשהן חלות על אלמנט צאצא, כלומר כשהמארז עומד בתנאי של השאילתה.

כדי להבין מתי אפשר לבדוק הצהרות @container בדף ההדגמה הזה, כדאי לבדוק את דוגמת הקוד הבאה:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

בדוגמה הזו, אם רוחב המאגר חורג מהמספר הבא של פיקסלים, יילקחו בחשבון הסגנונות המתאימים:

• יותר מ-400px: רכיב הפסקה (p) מופיע בדף כבלוק – הוא מתחיל בשורה חדשה ומשתמש בכל הרוחב.
• יותר מ-600px: הצאצאים יקבלו פריסה של רשת אופקית, עם הכותרת (h1) בחלק העליון והתמונה (img) בצד ימין.

כדי לבדוק את ההצהרה הראשונה של @container:

1. בחלונית Elements, מגדירים את רוחב המאגר כ-500px. הרכיב p מופיע.

2. בוחרים את הרכיב p. בחלונית Styles מוצגת ההצהרה @container יחד עם קישור לקונטיינר ההורה article.card.

   

3. מגדירים את הרוחב ליותר מ-600px ובוחרים את אחד מהרכיבים המושפעים. בודקים הצהרות @container שמטמיעות פריסה אופקית.

   

חיפוש רכיבי מאגר

כדי למצוא ולבחור רכיב מאגר שהפעיל את השאילתה, מעבירים את העכבר מעל שם הרכיב מעל ההצהרה @container ולוחצים עליו.

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

שינוי שאילתות של קונטיינרים

כדי לנפות באגים בשאילתה, אפשר לשנות אותה כמו כל הצהרת CSS אחרת בחלונית Styles (סגנונות), כפי שמתואר בקטע הצגה ושינוי של CSS.

בדוגמה הזו, רוחב המאגר הוא 500px. הרכיב של הפסקה (p) מופיע בדף.

1. בוחרים את הרכיב p. בחלונית Styles. אפשר לראות את ההצהרה @container (inline-size > 400px).
2. משנים את הערך של inline-size מ-400px ל-520px.
3. הרכיב של הפסקה (p) נעלם מהדף כי הוא לא עמד בקריטריונים של השאילתה.