פיתוח ממשקים מותאמים למשתמש באמצעות שאילתות מדיה מועדפות

1. לפני שמתחילים

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

העדפות משתמש

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

הנה כמה דוגמאות להעדפות משתמש שאפשר להשתמש בהן בשירות CSS:

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

הנה כמה דוגמאות להעדפות משתמשים שיהיו זמינות בקרוב בשירות CSS:

• נתונים מצומצמים / מצב טעינה מהירה
• טווח צבעים
• ניגודיות (פחות | יותר | הפחתה)
• צבעים (כופים את הצבעים של המשתמש על הדף)
• שקיפות (מופעלת | מופחתת)

שאילתות מדיה

‫CSS והאינטרנט מאפשרים התאמה ורספונסיביות באמצעות שאילתות מדיה, תנאי הצהרה שמכיל קבוצה של סגנונות אם התנאי הזה מתקיים. התנאי הנפוץ ביותר הוא גודל אזור התצוגה של המכשיר: אם הגודל קטן מ-800 פיקסלים, אלה סגנונות טובים יותר למקרה הזה.

מותאם למשתמש

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

דרישות מוקדמות

• ידע ב-HTML וב-CSS
• ידע בכלים למפתחים, כמו הכלים למפתחים ב-Chrome

מה תפַתחו

ב-Codelab הזה, תיצרו טופס שמותאם למשתמשים ומשתנה בהתאם לפרמטרים הבאים:

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

מה תלמדו

ב-Codelab הזה נסביר על תכונות מודרניות של אתרים שיעזרו לכם ליצור טופס שמותאם למשתמש. תלמדו איך:

• יצירת עיצוב בהיר ועיצוב כהה ב-Make
• יצירה של טפסים נגישים עם אנימציות
• טפסים רספונסיביים בפריסה
• שימוש ביחידות יחסיות ובמאפיינים לוגיים

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

מה תצטרכו

• ‫Google Chrome מגרסה 89 ואילך, או הדפדפן המועדף עליכם

2. להגדרה

קבלת הקוד

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

מומלץ: שימוש ב-Codepen

1. פותחים כרטיסייה חדשה בדפדפן.
2. עוברים אל https://codepen.io/argyleink/pen/abBMeeq.
3. אם אין לכם חשבון, תצטרכו ליצור חשבון כדי לשמור את העבודה.
4. לוחצים על Fork.

חלופה: עבודה מקומית

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

שימוש ב-Git

1. נכנסים אל https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. משכפלים את המאגר לתיקייה.
3. שימו לב שההסתעפות שמוגדרת כברירת מחדל היא beginning.

שימוש בקבצים

הורדת קוד המקור

1. פורקים את קובץ ה-ZIP שהורדתם לתיקייה.

הפעלת הפרויקט

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

1. מריצים את הפקודה npm install כדי להתקין את התלות שנדרשת להרצת השרת.
2. מריצים את הפקודה npm start כדי להפעיל את השרת ביציאה 3000.
3. פותחים כרטיסייה חדשה בדפדפן.
4. עוברים אל http://localhost:3000.

מידע על ה-HTML

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

כשמוכנים להתחיל, זהו השלד של מה שתהפכו לחוויית משתמש דינמית וסתגלנית.

3. אינטראקציות דינמיות

Git branch: beginning

בסוף הקטע הזה, טופס ההגדרות ישתנה בהתאם ל:

• גיימפאד + מקלדת
• עכבר + מגע
• קורא מסך או טכנולוגיה מסייעת דומה

מאפיינים של ה-HTML

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

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

קיבוץ נתונים

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

אלמנטים של הזמנה

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

אינטראקציה עם המקלדת

משתמשי האינטרנט התרגלו לעבור בין שדות בטפסים באמצעות מקש Tab, ולמזלנו הדפדפן מטפל בזה אם מספקים את רכיבי ה-HTML הצפויים. שימוש ברכיבים כמו <button>,‏ <input>,‏ <h2> ו-<label> הופך אותם ליעדים אוטומטיים של מקלדת או קורא מסך.

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

style.css

input {
  outline-offset: 5px;
}

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

1. בודקים את רכיבי ה-HTML שמשמשים ב-index.html.
2. לוחצים על דף ההדגמה בדפדפן.
3. כדי להעביר את המיקוד ברכיב בטופס, לוחצים על המקשים tab ו-shift+tab.
4. משתמשים במקלדת כדי לשנות את הערכים של המחוונים ותיבות הסימון.
5. מחברים בקר גיימפאד באמצעות Bluetooth ומעבירים את המיקוד של האלמנטים בטופס.

אינטראקציה עם העכבר

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

רואים איך מקבלים שתי תכונות של חוויית משתמש לחיבור התוויות והקלטים שלהן?

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

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

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

לא משויך: אין מאפיינים שמקשרים בין הרכיבים

<input type="checkbox">
<label>...</label>

משויכים: מאפיינים שמקשרים בין הרכיבים

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

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

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

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

אינטראקציה עם קורא מסך

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

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

index.html

<picture aria-hidden="true">

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

לרכיב של פס ההזזה input[type="range"] יש מאפיין ARIA מיוחד: aria-labelledby="media-volume". הן מספקות לקורא המסך הוראות מיוחדות לשיפור חוויית המשתמש.

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

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

4. פריסות מותאמות

ענף Git: layouts

בסיום הקטע הזה, דף ההגדרות:

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

ריווח

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

מאפיינים מותאמים אישית

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

• ממקמים את הקישורים האלה בחלק העליון של style.css:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

סגנונות דף

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

• מי יצורף למרחב style.css:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

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

טיפוגרפיה

הגופן בפריסה הזו הוא אדפטיבי. מילת המפתח system-ui תשתמש בגופן הממשק האופטימלי לפי מה שמערכת ההפעלה של המשתמש קבעה.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

הסגנונות של h1,‏ h2 ו-h3 הם מינוריים וסגנוניים. עם זאת, לרכיב small נדרש הרכיב הנוסף line-height למקרים שבהם הטקסט עובר לשורה חדשה. אחרת, הוא יהיה צפוף מדי.

מאפיינים לוגיים

שימו לב שהמאפיין padding ב-body משתמש במאפיינים לוגיים (block-start, block-end) כדי לציין את הצד. נשתמש במאפיינים לוגיים באופן נרחב בהמשך ה-codelab. גם הם, כמו יחידת rem, מותאמים למשתמש. אפשר לתרגם את הפריסה הזו לשפה אחרת, ולהגדיר אותה לכיוון הכתיבה והמסמך הטבעי שהמשתמש רגיל אליו בשפת האם שלו. מאפיינים לוגיים מאפשרים תמיכה בכך באמצעות הגדרה אחת בלבד של רווח, כיוון או יישור.

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

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

CSS Grid Layouts

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

הנה צילום מסך של כלי הפיתוח ל-Chrome שבו מוצגת שכבת-על של כל פריסת רשת CSS בכל פעם:

1. מוסיפים כל אחד מהסגנונות הבאים ל-style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

כברירת מחדל, כל רכיב צאצא ממוקם בשורה משלו בפריסת Grid, ולכן היא מצוינת לסידור רכיבים אחד מעל השני. יש לו גם יתרון נוסף: הוא משתמש ב-gap. קודם לכן הגדרתם את margin: 0 בכל הרכיבים עם בורר *, וזה חשוב עכשיו כי אתם משתמשים ב-gap לריווח. ה-Gap הוא לא רק מקום אחד לניהול המרחב במאגר, אלא גם זרימה יחסית.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

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

• ‫max-width מספק ערך לאלגוריתם הפריסה, כדי שישתמש בו כשהוא מחליט מה הגודל המקסימלי של המודעה.
• האפליקציה gap משתמשת במאפיינים מותאמים אישית ומעבירה ערך שונה של row-gap מ-column-gap.
• הערך של align-items מוגדר כ-flex-start כדי שלא יתבצע מתיחה של גובה הפריט.
• לפונקציה grid-template-columns יש תחביר מורכב, אבל המטרה היא פשוטה: לשמור על רוחב של 35ch עמודות, לא פחות מ-10ch, ולהציב את הפריטים בעמודות אם יש מקום, אחרת בשורות.

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

<section>

section {
  display: grid;
  gap: var(--space-md);
}

כל קטע צריך להיות רשת של שורות עם רווח בינוני בין רכיבי הצאצא.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

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

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

הפריסה הזו אחראית ליצירת מראה של כרטיס ולקבוץ של אמצעי הקלט. ההבדל בין overflow: hidden לבין gap: 1px יתבהר כשתוסיפו צבע בקטע הבא.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

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

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

‪.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

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

‫<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

בפריסה הזו, המיקום במרכז מוגבל לתמונה ולתיבת הסימון באמצעות :is pseudo selector.

3. מחליפים את הסלקטור picture > svg ב-.fieldset-item svg כך:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

ההגדרה הזו קובעת את גודל סמל ה-SVG לערך משיטת המדידה.

‫‎.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

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

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

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

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

1. פותחים את הכלים למפתחים ב-Chrome ומחפשים את תגי הרשת ב-HTML בחלונית Elements (רכיבים). לוחצים עליהם כדי להפעיל את כלי הניפוי באגים.
2. פותחים את הכלים למפתחים ב-Chrome ומעבירים את העכבר מעל רווח בחלונית Styles (סגנונות).
3. פותחים את הכלים למפתחים ב-Chrome, עוברים לחלונית Styles (סגנונות) ועוברים מStyles (סגנונות) לLayouts (פריסות). כדי לבחון את האזור הזה, אפשר להחליף את ההגדרות ולהפעיל את הפריסות.

שאילתות מדיה

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

הערה: צריך להוסיף את ה-CSS של כל קטע אחרי הסלקטור שהוא משנה ב-style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

הטופס כבר היה רספונסיבי לגודל אזור התצוגה עם auto-fit, אבל במהלך בדיקה במכשיר נייד, סיבוב המכשיר למצב אופקי לא מציב את שתי קבוצות הטופס זו לצד זו. התאמה להקשר של נוף כזה באמצעות שאילתת מדיה orientation ובדיקה של רוחב אזור התצוגה. עכשיו, אם המכשיר מוצג לרוחב והרוחב שלו הוא לפחות 640 פיקסלים, אפשר להגדיר בכוח שתי עמודות על ידי החלפת המאפיין המותאם אישית --repeat במספר במקום במילת המפתח auto-fit.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

שאילתת המדיה הזו היא עוד הרחבה של הריווח כשזמין יותר מקום באזור התצוגה. תבנית הרשת מרחיבה את העמודה הראשונה באמצעות מאפיין מותאם אישית גדול יותר (var(--space-xxl)) בתבנית. הריפוד מוגדל גם למאפיינים מותאמים אישית גדולים יותר.

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

1. אפשר להרחיב ולכווץ את הדפדפן ולראות איך המרווח משתנה.
2. תצוגה מקדימה במכשיר נייד
3. תצוגה מקדימה במכשיר נייד במצב אופקי

5. צבע דינמי

ענף Git: colors

בסוף הקטע הזה, טופס ההגדרות שלכם:

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

HSL

בסעיף הבא, תלמדו איך ליצור מערכת צבעים עם HSL שתעזור לכם ליצור עיצוב בהיר ועיצוב כהה. הוא מבוסס על מושג הליבה הזה ב-CSS: ‏ calc().

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

מאפיינים מותאמים אישית

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

נניח שצבע המותג של האפליקציה הוא #0af. המשימה הראשונה שלך היא להמיר את הערך ההקסדצימלי של הצבע הזה לערך צבע HSL: ‏ hsl(200 100% 50%). ההמרה הזו חושפת את ערוצי הצבע של המותג ב-HSL, שבהם אפשר להשתמש calc() כדי לחשב צבעים תומכים שונים של המותג.

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

כל אחד מבלוקי הקוד הבאים בקטע הזה צריך להתווסף לאותו בורר :root.

ערוצי מותג

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

שלושת הערוצים של HSL חולצו והוצבו בנכסים מותאמים אישית משלהם.

1. משתמשים בכל שלושת המאפיינים כמו שהם ויוצרים מחדש את צבע המותג.

מותג

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

ערכת הצבעים שלכם כהה כברירת מחדל, ולכן מומלץ להפחית את הרוויה של הצבעים לשימוש במשטחים כהים (אחרת הם עלולים להיראות רוטטים או להיות לא נגישים). כדי להפחית את הרוויה של צבע המותג, משתמשים בגוון ובבהירות כמו שהם, אבל מחלקים את הרוויה בחצי: calc(var(--saturation) / 2). עכשיו צבע המותג מופיע בצורה תקינה בעיצוב, אבל הוא לא רווי כדי שאפשר יהיה להשתמש בו.

טקסט

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

בנושא הכהה שלנו, אתם משתמשים בגוון המותג כבסיס, אבל יוצרים ממנו צבעים כמעט לבנים. משתמשים רבים יחשבו שהטקסט לבן, אבל בפועל הוא כחול בהיר מאוד. שימוש בגוונים דומים הוא דרך טובה ליצור הרמוניה בעיצוב. --text1 הוא 85% לבן ו--text2 הוא 65% לבן, ולשניהם יש רוויה נמוכה מאוד.

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

פלטפורמה

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

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

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

עיצוב בהיר

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

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

מותג

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

השלב הראשון הוא בחירת צבע המותג. צריך לשחזר את הרוויה לעוצמה מלאה.

טקסט

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

בדומה לצבעי הטקסט הכחולים הבהירים מאוד בעיצוב הכהה, בעיצוב הבהיר צבעי הטקסט הם כחולים כהים מאוד. אם ערכי הבהירות של צבע HSL הם 10% ו-30%, סימן שהצבעים האלה כהים.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

שימוש במערכת הצבעים

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

• בקטעי הקוד הבאים, מוצאים את הסלקטור התואם ומוסיפים את ה-CSS של הצבע לבלוק הקוד הקיים.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

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

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<small>

small {
  color: var(--text2);
}

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

אמצעי בקרה כהים בטופס

:root {
  color-scheme: dark light;
}

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

6. אנימציה דינמית

ענף Git: animations

בסיום הקטע הזה, דף ההגדרות:

• התאמה להעדפות התנועה של המשתמש
• מענה לאינטראקציית משתמש

תנועה מופחתת לעומת ללא תנועה

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

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

סגנונות אינטראקציה

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

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

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

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

7. מזל טוב

ענף Git: complete

מעולה, יצרתם ממשק שמותאם למשתמש.

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