מקרים לדוגמה בנושא שאילתות על קונטיינרים

Swetha Gopalakrishnan

Saurabh Rajpal

שאילתות בקונטיינרים מציעות גישה דינמית וגמישה מאוד לעיצוב רספונסיבי. שאילתות קונטיינרים משתמשות בכלל @container ב-@. הפעולה הזו פועלת באופן דומה לשאילתת מדיה עם @media, אבל במקום זאת, @container שולחת שאילתה לקונטיינר הורה כדי לקבל מידע על עיצוב במקום לחלון התצוגה ולסוכן המשתמש.

שאילתות בקונטיינרים הן חלק מBaseline Newly Available.

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

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

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

redBus

RedBus מתחזק ומציג קוד שונה לגרסאות שלו לנייד ולמחשב. אחרי שהטמיעו שאילתות בקונטיינרים בדפים דברים שאפשר לעשות ו-cargo, הם הצליחו לאחד את הקוד הזה לקוד בסיס יחיד לאתרים האלה. כך הם הפכו לרספונסיביים וחסכנו זמן פיתוח. הדוגמה הבאה ממחישה זאת באמצעות דף המטען:

קוד

בדוגמה הבאה, .bpdpCardWrapper הוא מאגר ההורה, שנקרא bpdpSection.

אם רוחב הקונטיינר bpdpSection הוא 744px לפחות, הרכיבים font-size ו-line-height של הרכיבים שנבחרו על ידי .bpdpCardContainer ו-.subTxt, .bpdpAddress מתעדכנים.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

השפעה

Tokopedia

דפי פרטי המוצרים (PDP) ב-Tokopedia מכילים כמה כרטיסיות לפרטי החנות והמוצר. בעבר, הפריסה של הדף הזה חולקה לשלוש עמודות, ולפעמים שם המוצר שמשמאל נחתך למסכים קטנים יותר (ראו את הסרטון הבא).

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

לפני

אחרי

קוד

הקוד הבא שולח שאילתה לגבי הגודל של מאגר האב בשם infowrapper. אם הרוחב המקסימלי של infowrapper הוא 360px, הרכיבים הצאצאים width, ‏ margin, ו-padding מותאמים.

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

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

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

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

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

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

מקורות:

• שאילתות קונטיינרים נוחתות בדפדפנים יציבים
• שאילתות בקונטיינרים – תכנון בדפדפן
• דמו של שאילתות בקונטיינרים
• הדגמה: כרטיסי שאילתות של מאגרים
• סרטון: מה חדש בממשק המשתמש האינטרנטי – I/O 2023
• רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע ממך.

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

• למה יכולות ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני שלכם?
• מקרים לדוגמה של אנימציות שמתבססות על גלילה
• מקרים לדוגמה בנושא Transitions
• מקרים לדוגמה בנושא חלונות קופצים
• מקרים לדוגמה של בורר:has()