העיצוב החדש והרספונסיבי: עיצוב אינטרנט בעולם המבוסס על רכיבים

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

עיצוב רספונסיבי היום

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

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

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

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

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

אנחנו רואים את זה קורה בערך כל 10 שנים. לפני 10 שנים, בסביבות 2010-2012, ראינו שינוי עצום בעיצוב לנייד ובעיצוב רספונסיבי, והופעתו של CSS3.

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

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

תגובה למשתמש

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

תכונות המדיה האלה שמבוססות על העדפות המשתמשים כוללות:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• ועוד

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

prefers-reduced-motion

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

בעזרת prefers-reduced-motion תוכלו לעצב את הדפים שלכם תוך התחשבות בתנועה מופחתת, וליצור חוויה עם תנועה משופרת למשתמשים שלא הגדירו את ההעדפה הזו.

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

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

prefers-color-scheme

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

אם הגדרתם את הדף באמצעות מאפייני CSS מותאמים אישית, תוכלו להחליף את ערכי הצבעים בקלות. אפשר לעדכן במהירות את ערכי עיצוב הצבעים, כמו backgroundColor ו-textOnPrimary, כדי להתאים באופן דינמי לעיצוב החדש בתוך שאילתה המדיה.

כדי שיהיה קל יותר לבדוק חלק משאילתות ההעדפות האלה, אפשר להשתמש בDevTools להדמיה במקום לפתוח את העדפות המערכת בכל פעם.

עיצוב לעיצוב כהה

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

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

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

מחקר של Android משנת 2018 בנושא עיצובים כהים הראה חיסכון בצריכת החשמל של עד 60%, בהתאם לבהירות המסך ולממשק המשתמש הכולל. הנתון הסטטיסטי של 60% הגיע מהשוואה בין מסך ההפעלה של YouTube עם סרטון מושהה בהירות מסך של 100%, עם עיצוב כהה של ממשק המשתמש של האפליקציה לעומת עיצוב בהיר.

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

תגובה למאגר

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

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

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

לא ניתן להשיג את מידת הגמישות הזו באמצעות שאילתות מדיה בלבד.

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

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

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

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

הקוד שלמעלה משתמש ב-max-width, מגדיר את הקישורים ל-display:none וגם מקטין את גודל הגופן של השעון כשרוחב המאגר קטן מ-850px.

כרטיסי שאילתות בקונטיינרים

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

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

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

כשיש לפחות 350px מרווח ברשימה, פריסת הכרטיסים הופכת לאופקית על ידי הגדרה של display: flex, עם ברירת מחדל של flex-direction‏ 'row'.

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

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

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

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

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

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

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

הדמואים האלה זמינים עכשיו לבדיקה ב-Chrome Canary. עוברים אל about://flags ב-Canary ומפעילים את הדגל #enable-container-queries. הפעולה הזו תאפשר תמיכה בערכים @container, inline-size ו-block-size למאפיין contain, ובהטמעת LayoutNG Grid.

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

סגנונות ברמת ההיקף

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

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

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

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

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

תגובה בהתאם לגורם הצורה

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

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

שאילתת מדיה ניסיונית לתצוגה במסך מלא יכולה לעזור לנו בנושא הזה. בשלב זה, ההתנהגות היא כך: @media (spanning: <type of fold>). בדמו מוצגת פריסה של רשת עם שתי עמודות: אחת ברוחב --sidebar-width, שהוא 5rem כברירת מחדל, והשנייה ברוחב 1fr. כשהפריסה מוצגת במסך כפול עם ציר קיפול אנכי אחד, הערך של --sidebar-width מתעדכן בערך הסביבה של הציר הימני.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

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

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

סיכום

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

זה הגרסה החדשה של התג הרספונסיבי.

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

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

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

web.dev/learnCSS

בינתיים, אם אתם רוצים לשפר את היכולות שלכם ב-CSS, או אולי לחזור על כמה יסודות, הצוות שלי משיקים קורס CSS חדש לגמרי ומקור מידע חינמי ב-web.dev. אפשר לגשת אליו בכתובת web.dev/learnCSS.

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

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