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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

שאילתות לגבי מאגר תגים הן חלק מהבסיס החדש זמין.

תמיכה בדפדפן

  • 105
  • 105
  • 110
  • ‏16

מקור

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

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

תמונה שמראה איך סוגים שונים של סגנון פועלים יחד.
web.dev – הגרסה הרספונסיבית החדשה.

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

redBus

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

קוד

בדוגמה הבאה, .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;
   }
}

השפעה

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

טוקופדיה

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

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

לפני

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

אחרי

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

קוד

הקוד הבא שולח שאילתה לגבי הגודל של מאגר ההורה בשם 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 מצאה את התרחיש לדוגמה, וחיפשה שלוש נקודות טקסט באתר שלה. זו המשמעות של קונטיינרים שעשויים להיות קטנים מדי וכתוצאה מכך התוכן נקטע עבור המשתמש.

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

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

מקורות מידע:

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