בדיקה וניפוי באגים בשאילתות של מאגרי 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) נעלם מהדף כי הוא לא עמד בקריטריונים של השאילתה.