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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
Saurabh Rajpal
Saurabh Rajpal

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

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

תמיכה בדפדפן

  • Chrome: 105.
  • קצה: 105.
  • Firefox: 110.
  • Safari: 16.

מקור

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

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

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

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

השפעה

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

Tokopedia

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

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

לפני

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

אחרי

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

קוד

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

מקורות:

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