בדיקה וניפוי באגים בשאילתות של מאגרי 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. בחלונית סגנונות, אפשר לראות את ההצהרה @container יחד עם קישור למאגר ההורה article.card.

   

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

   

חיפוש רכיבי קונטיינר

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

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

שינוי שאילתות לגבי מאגר תגים

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

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

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