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

Swetha Gopalakrishnan

Saurabh Rajpal

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

שאילתות קונטיינר הן חלק מ-Baseline Newly Available (זמינות חדשה של הבסיס).

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

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

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

redBus

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

קוד

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

אם הרוחב המינימלי של מאגר bpdpSection הוא 744 פיקסלים, הערך של 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

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

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

לפני

אחרי

קוד

הקוד הבא שולח שאילתה לגבי הגודל של מאגר ההורה שנקרא infowrapper. אם הרוחב המקסימלי של infowrapper הוא 360 פיקסלים, רכיבי הצאצא 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
• מקרים לדוגמה של Popover
• מקרים לדוגמה של בורר:has()