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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

web.dev—The New Responsive.

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

redBus

‫redBus מתחזקת ומציגה קוד שונה לגרסאות לנייד ולמחשב. אחרי שהם הטמיעו שאילתות של קונטיינרים בדפים Things-to-do ו-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;
   }
}

השפעה

	לפני (בסיס קוד מרובה)	אחרי (בסיס קוד יחיד)
תשתית	תשתית נפרדת (עלות גבוהה).	אותה תשתית (עלות מופחתת).
עיצוב	ממשק משתמש נפרד, אבל עקביות נמוכה.	קשה לפתור את הבעיה, אבל אפשר.
ביצועים	קל לטפל בזה כי המערכת נפרדת, אבל יש כפילות במאמץ לשיפור הביצועים.	הניקוד הזה ספציפי לדף ולתכונה, אבל הניקוד של redBus ב-PageSpeedInsights גבוה מ-80.
פיתוח	צוותי פיתוח נפרדים.	קיצור הזמן ב-30% עד 40%.

Tokopedia

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

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

לפני

לפני הטמעת שאילתות של מאפייני מאגר, המילים "ISKU 10 in 1 Obeng satu.." בפינה הימנית העליונה נחתכות במסכים קטנים יותר.

אחרי

הטמעה של שאילתות לגבי רכיבי container משנה את הפריסה כך שהטקסט יישאר בתוך אזור התצוגה.

קוד

הקוד הבא שולח שאילתה לגבי הגודל של מאגר האב שנקרא 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;
  }
`;

נקודות למחשבה כשמשתמשים בשאילתות לגבי רכיבי container

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

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

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

מקורות מידע:

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

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

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