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

סופיה אמליאנובה

GitHub

ג'סלין יין

Twitter GitHub דף הבית

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

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

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

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

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

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

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

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

בדיקה של שאילתות מאגר

בחלונית רכיבים מוצגות @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. בחלונית רכיבים, מגדירים את רוחב הקונטיינר ל-500px. הרכיב p מופיע.

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

   

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

   

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

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

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

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

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

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

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