שאילתות של קונטיינרים
מציעים גישה דינמית וגמישה במיוחד
לעיצוב. שאילתות קונטיינרים משתמשות בכלל @container
ב-@. היא פועלת
דרך שאילתת מדיה עם @media
, אבל במקום זאת, @container
שולח שאילתה להורה
מאגר לפרטי עיצוב ולא את אזור התצוגה וסוכן המשתמש.
שאילתות קונטיינר הן חלק מ-Baseline Newly Available (זמינות חדשה של הבסיס).
בתגובה לגודל המאגר, שאילתות של קונטיינרים מאפשרות לרכיבים להתאים למיקום שלהם בממשק. לדוגמה, רכיב בכרטיס יכול לשנות את גודל וסגנונות בהתאם למאגר שבו הוא נמצא, בין אם זה סרגל צד, Hero או רשת בתוך הגוף הראשי של הדף.
כפי שמוצג באיור הבא, ניתן לשלב שאילתות מדיה למאקרו. פריסות, שאילתות קונטיינרים לפריסות מיקרו, עם מדיה המבוססת על העדפת משתמש כדי ליצור מערכת עיצוב רספונסיבית מתקדמת. נקראו מידע נוסף על שאילתות קונטיינרים עיצוב רספונסיבי חדש.
![תמונה שמראה איך סוגי עיצוב שונים פועלים יחד.](https://developer.chrome.com/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=9&hl=he)
המאמר הזה הוא חלק מסדרה שעוסקת באופן שבו חברות מסחר אלקטרוני שיפרו את האתרים שלהם באמצעות תכונות חדשות של 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 כוללים מספר כרטיסיות עבור החנות, פרטי המוצר. בעבר, פריסת הדף הזה חולקה לשלושה ולפעמים שם המוצר שמימין נחתך בגדלים של מסכים (צפו בסרטון "לפני" הבא).
כדי לפתור את בעיית הפריסה הזו, הם משתמשים בקלות ובמהירות בשאילתות של קונטיינרים. לאחר ההטמעה, הם יכלו לקבל פריסה גמישה שבה שם המוצר תמיד היה גלוי במלואו (ניתן לצפות בסרטון 'אחרי' הבא).
לפני
אחרי
קוד
הקוד הבא שולח שאילתה לגבי הגודל של מאגר ההורה שנקרא 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()
.