עדכונים אחרונים בנושא ממשק המשתמש של CSS ואינטרנט: סיכום כנס I/O 2024

Una Kravets

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

חוויות אינטראקטיביות חדשות

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

אנימציות שמופעלות בגלילה

כמו שאפשר להבין מהשם, scroll-driven animations API מאפשר ליצור אנימציות דינמיות שמבוססות על גלילה, בלי להסתמך על scroll observers או על סקריפטים כבדים אחרים.

יצירת אנימציות מבוססות-גלילה

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

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

חשוב לזכור את תמיכת הדפדפן ואת העדפות המשתמשים, במיוחד כשמדובר בצרכי נגישות. לכן, כדאי להשתמש בכלל @supports כדי לבדוק אם הדפדפן תומך באנימציות מבוססות גלילה, ולעטוף את האנימציה מבוססת הגלילה בשאילתת העדפות משתמש כמו @media (prefers-reduced-motion: no-preference) כדי לכבד את העדפות התנועה של המשתמשים. אחרי הבדיקות האלה, אתם יודעים שהסגנונות שלכם יעבדו ושהאנימציה לא תגרום לבעיות למשתמש.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

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

היתרונות בביצועים של אנימציות מבוססות-גלילה

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

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

"הצלחנו לצמצם עד 80% משורות הקוד שלנו בהשוואה לשימוש באירועי גלילה רגילים של JS, וראינו שהשימוש הממוצע במעבד ירד מ-50% ל-2% בזמן הגלילה. ‫- Andy Wihalim, מהנדס תוכנה בכיר, Tokopedia"

העתיד של אפקטים של גלילה

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

בעתיד יתווספו לדפדפנים עוד תכונות גלילה. בהדגמה (דמו) הבאה מוצג שילוב של התכונות האלה שיהיו זמינות בעתיד. הוא משתמש ב-CSS scroll-start-target כדי להגדיר את התאריך והשעה הראשוניים ברכיבי בחירת התאריך והשעה, ובאירוע JavaScript scrollsnapchange כדי לעדכן את התאריך בכותרת, כך שקל לסנכרן את הנתונים עם האירוע שנוצר.

אפשר גם להשתמש בזה כדי לעדכן את הכלי לבחירת תאריכים בזמן אמת באמצעות אירוע JavaScript‏ scrollsnapchanging.

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

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

הצגת המעברים

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

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

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

כדי להפעיל במהירות מעברים בין תצוגות באפליקציה של דף יחיד, פשוט עוטפים אינטראקציה באמצעות document.startViewTransition, ומוודאים שלכל רכיב שמועבר יש view-transition-name, מוטמע או דינמי באמצעות JavaScript כשיוצרים צומתי DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

הצגת כיתות מעבר

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

הצגת סוגי המעברים

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

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

אפשר להגדיר טיפוסים בפונקציה document.startViewTransition, שעכשיו מקבלת אובייקט. ‫update היא פונקציית הקריאה החוזרת שמעדכנת את ה-DOM, ו-types הוא מערך עם הסוגים.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

מעברים בין תצוגות של כמה דפים

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

חבילת התכונות החדשה הזו כוללת חוויות אינטרנט שמתרחשות באותו מקור, כמו מעבר מ-web.dev אל web.dev/blog, אבל היא לא כוללת מעבר בין מקורות שונים, כמו מעבר מ-web.dev אל blog.web.dev או אל דומיין אחר כמו google.com.

אחד ההבדלים העיקריים בין מעברי תצוגה באותו מסמך לבין מעברי תצוגה במסמכים שונים הוא שלא צריך להוסיף את התג document.startViewTransition() למעבר. במקום זאת, צריך להפעיל את האפשרות בשני הדפים שמשתתפים במעבר התצוגה באמצעות כלל ה-CSS ‏@view-transition at-rule.

@view-transition {
  navigation: auto;
}

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

עם pageswap אפשר לבצע שינויים בדף היוצא ממש לפני שנוצרות התמונות הישנות, ועם pagereveal אפשר להתאים אישית את הדף החדש לפני שהוא מתחיל להופיע אחרי שהוא מאותחל.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

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

• מעברים בהיקף מוגבל: מאפשרים להגביל מעבר לעץ משנה של DOM, כך ששאר הדף ימשיך להיות אינטראקטיבי, ותומכים במספר מעברים בין תצוגות שפועלים בו-זמנית.
• מעברים בין תצוגות שמבוססים על תנועות: אפשר להשתמש בתנועות גרירה או החלקה כדי להפעיל מעבר בין תצוגות של מסמכים שונים, וליהנות מחוויה שדומה יותר לחוויה של אפליקציה מקומית באינטרנט.
• התאמת ניווט ב-CSS: אפשר להתאים אישית את מעבר התצוגה בין מסמכים ישירות ב-CSS, כחלופה לשימוש באירועים pageswap ו-pagereveal ב-JavaScript. כדי לקבל מידע נוסף על מעברים בין תצוגות באפליקציות מרובות דפים, כולל איך להגדיר אותם בצורה הכי יעילה באמצעות טרום-עיבוד, אפשר לצפות בהרצאה הבאה של Bramus Van Damme:

רכיבי ממשק משתמש שמופעלים על ידי מנוע: פישוט אינטראקציות מורכבות

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

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

תפריט נפתח מורכב מחלקים רבים וכולל מצבים רבים שצריך לקחת בחשבון, כמו:

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

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

The Popover API

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

רכיבי Popover מוסתרים באמצעות display: none עד שהם נפתחים באמצעות רכיב שמפעיל אותם, כמו לחצן או JavaScript. כדי ליצור חלון קופץ בסיסי, מגדירים את מאפיין החלון הקופץ ברכיב ומקשרים את המזהה שלו ללחצן באמצעות popovertarget. עכשיו, הכפתור הוא המפעיל,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

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

• קידום לשכבה העליונה: שכבה נפרדת מעל שאר הדף, כך שלא צריך להתעסק עם z-index.
• פונקציונליות של סגירה בלחיצה מחוץ לחלון: אם לוחצים מחוץ לאזור של התפריט הנפתח, התפריט ייסגר והמיקוד יחזור.
• ניהול ברירת המחדל של המיקוד בכרטיסיות: פתיחת ה-popover גורמת לכך שה-tab stop הבא יהיה בתוך ה-popover.
• מקשי קיצור מובנים במקלדת: הקשה על המקש esc או החלפה כפולה של המצב תסגור את הבועה ותחזיר את המיקוד.
• קישורי רכיבים שמוגדרים כברירת מחדל. ‫: הדפדפן מקשר באופן סמנטי בין חלון קופץ לבין הרכיב שמפעיל אותו.

יכול להיות שאתם כבר משתמשים ב-Popover API בלי לדעת. ב-GitHub הטמיעו חלון קופץ בתפריט 'חדש' בדף הבית ובסקירה הכללית של בקשת המשיכה. הם שיפרו את התכונה הזו בהדרגה באמצעות popover polyfill, שנבנה על ידי Oddbird עם תמיכה משמעותית של קית' סירקל מ-GitHub, כדי לתמוך בדפדפנים ישנים יותר.

"הצלחנו להוציא משימוש אלפי שורות קוד פשוט על ידי מעבר לחלון קופץ. ה-Popover עוזר לנו בכך שהוא מבטל את הצורך להילחם במספרי z-index קסומים... יצירת קשר נכון של עץ הנגישות עם התנהגות מוצהרת של לחצנים, והתנהגויות מובנות של מיקוד, מקלים באופן משמעותי על מערכת העיצוב שלנו ליישם דפוסים בצורה הנכונה. – קית' סירקל, מהנדס תוכנה, GitHub"

הוספת אנימציה לאפקטים של כניסה ויציאה

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

היכולת ליצור אנימציה של display ושל content-visibility בציר זמן של תמונות מפתח.

המאפיין transition-behavior עם מילת המפתח allow-discrete כדי להפעיל מעברים של מאפיינים נפרדים כמו display.

הכלל @starting-style ליצירת אנימציה של אפקטים של כניסה מ-display: none אל השכבה העליונה.

מאפיין שכבת-העל לשליטה בהתנהגות השכבה העליונה במהלך אנימציה.

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

קודם צריך להגדיר את @starting-style, כדי שהדפדפן יידע אילו סגנונות להנפיש את הרכיב הזה ב-DOM. ההגדרה הזו חלה גם על תיבת הדו-שיח וגם על הרקע. לאחר מכן, מעצבים את המצב הפתוח של תיבת הדו-שיח ושל הרקע. בתיבת דו-שיח, משתמשים במאפיין open, ובחלון קופץ, משתמשים בפסאודו-אלמנט ::popover-open. לבסוף, מנפישים את opacity, display ו-overlay באמצעות מילת המפתח allow-discrete כדי להפעיל את מצב ההנפשה שבו אפשר להעביר מאפיינים נפרדים.

מיקום מודעות העוגן

הסיפור התחיל עם חלון קופץ. עדכון חשוב מאוד: החל מ-Chrome 125, יש תמיכה במיקום עוגן.

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

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

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

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

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

לבסוף, משתמשים במילת המפתח החדשה anchor-center במאפיינים justify ו-align כדי למרכז את הרכיב הממוקם ביחס לעוגן שלו.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

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

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area מיקום

בנוסף למיקום האבסולוטי של ברירת המחדל שבו השתמשתם בעבר, יש מנגנון פריסה חדש שנוסף כחלק מ-API למיקום עוגנים שנקרא'אזור שקוע'. האזור המובלע מאפשר למקם בקלות רכיבים ממוקמים ביחס לעוגנים המתאימים שלהם, והוא פועל ברשת של 9 תאים עם רכיב העוגן במרכז. לדוגמה, inset-area: top ממקם את האלמנט הממוקם בחלק העליון, ו-inset-area: bottom ממקם את האלמנט הממוקם בחלק התחתון.

גרסה פשוטה של הדוגמה הראשונה של העוגן נראית כך עם inset-area:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

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

מיקומי עוגן דינמיים עם position-try-options

קל יותר ליצור תפריטים ולנווט בתפריטי משנה באמצעות שילוב של מיקום חלון קופץ ועוגן. בנוסף, כשמגיעים לקצה של אזור תצוגה עם רכיב מעוגן, אפשר לאפשר לדפדפן לטפל בשינוי המיקום. יש כמה דרכים לעשות את זה. האפשרות הראשונה היא ליצור כללי מיקום משלכם. במקרה הזה, תפריט המשנה ממוקם בהתחלה משמאל ללחצן 'חנות'. אבל אפשר ליצור @position-try בלוק למקרים שבהם אין מספיק מקום משמאל לתפריט, ולתת לו מזהה מותאם אישית של --bottom. לאחר מכן, מחברים את הבלוק @position-try לעוגן באמצעות position-try-options.

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

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

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

position-try-options: flip-block, flip-inline;

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

מידע נוסף על מיקום עוגן

העתיד של ממשק משתמש בשכבות

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

בנוסף, יש עוד כלי כללי להפעלת פונקציות (invoketarget) שזמין לבדיקה ב-Canary, הודות לעבודה של שני מפתחי צד שלישי, קית' סירקל ולוק וורלו. ‫invoketarget תומך בחוויית הפיתוח הדקלרטיבית ש-popovertarget מספקת חלונות קופצים, מנורמלים לכל הרכיבים האינטראקטיביים, כולל <dialog>,‏ <details>,‏ <video>,‏ <input type="file"> ועוד.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

רכיב select עם סגנון

הצוות משתמש ב-popover וב-anchor כדי להתקדם בהוספת תפריט נפתח עם אפשרויות בחירה שניתן להתאמה אישית. החדשות הטובות הן שהושג הרבה התקדמות. החדשות הרעות הן שה-API הזה עדיין נמצא בשלב ניסיוני. אבל אשמח לשתף איתך הדגמות בזמן אמת ועדכונים על ההתקדמות שלנו, ולקבל ממך משוב. קודם כל, חל שיפור באופן שבו המשתמשים יכולים להצטרף לגרסה החדשה של התכונה 'בחירה' שניתנת להתאמה אישית. הדרך הנוכחית, שנמצאת עדיין בתהליך פיתוח, היא להשתמש במאפיין מראה ב-CSS, שמוגדר ל-appearance: base-select. אחרי שתגדירו את המראה, תצורפו לחוויית בחירה חדשה שניתנת להתאמה אישית.

select {
  appearance: base-select;
}

בנוסף ל-appearance: base-select, יש כמה עדכוני HTML חדשים. האפשרויות האלה כוללות את היכולת להוסיף תגי datalist כדי להתאים אישית את האפשרויות, ואת היכולת להוסיף לאפשרויות תוכן שרירותי לא אינטראקטיבי, כמו תמונות. תהיה לכם גם גישה לרכיב חדש, <selectedoption>, שישקף את התוכן של האפשרויות בתוכו, ואז תוכלו להתאים אותו לצרכים שלכם. הרכיב הזה מאוד שימושי.

הדגמה ויזואלית

הדגמה חיה

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

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

הדגמה ויזואלית

הדגמה חיה

selectedoption .text {
  display: none;
}

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

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

אקורדיון בלעדי

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

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

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid וגם :user-invalid

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

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

מידע נוסף על שימוש בפסאודו-אלמנטים של אימות טפסים מסוג user-*

field-sizing: content

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

textarea, select, input {
  field-sizing: content;
}

מידע נוסף על שינוי הגודל של שדות

<hr> ב-<select>

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

בחירת צילום מסך

בחירה באפשרות 'הדגמה בזמן אמת'

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

מידע נוסף על שימוש בתג hr בבורר

שיפורים באיכות החיים

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

קינון עם חיפוש קדימה

התכונה Native CSS nesting (קינון CSS מקורי) הושקה בכל הדפדפנים בשנה שעברה, ומאז היא שופרה כך שתומכת בתכונה lookahead (חיפוש מראש). המשמעות היא שהסימן & לפני שמות הרכיבים כבר לא נדרש. כך ההזחה נראית הרבה יותר ארגונומית ודומה למה שהייתי רגיל אליו בעבר.

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

‫align-content לפריסת בלוקים

שינוי נחמד נוסף הוא האפשרות להשתמש במנגנוני מיקום כמו align-content בפריסת בלוקים. המשמעות היא שעכשיו אפשר לבצע פעולות כמו מרכוז אנכי בתוך div בלי להחיל פריסת flex או grid, ובלי תופעות לוואי כמו מניעת צמצום שוליים, שאולי לא תרצו מאלגוריתמים של פריסות כאלה.

צילום מסך

הדגמה בשידור חי

div {
  align-content: center;
}

גלישת טקסט: איזון ועיצוב

בנושא פריסה, שיפרנו את פריסת הטקסט והוספנו את האפשרויות text-wrap: balance ו-pretty. התג text-wrap: balance משמש ליצירת בלוק טקסט אחיד יותר, ואילו התג text-wrap: pretty מתמקד בצמצום של מילים בודדות בשורה האחרונה בטקסט.

h1 {
  text-wrap: balance;
}

מידע נוסף על text-wrap: balance

עדכונים בטיפוגרפיה בינלאומית

העדכונים בפריסת הטיפוגרפיה לתכונות טקסט ב-CJK קיבלו הרבה עדכונים נחמדים בשנה האחרונה, כמו התכונה word-break: auto-phrase שמאפשרת להעביר את השורה לתחילת הגבול הטבעי של הצירוף.

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

תחביר של צבעים יחסיים

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

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

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

פונקציית light-dark()

בנוסף לפונקציה light-dark(), עיצוב הנושאים הפך לדינמי ופשוט הרבה יותר.

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

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

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

דף :has() של הבורר

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

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

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

"בעזרת הסלקטור ‎ :has()‎ הצלחנו לבטל את האימות של בחירת המשתמש שמבוסס על JavaScript, ולהחליף אותו בפתרון CSS שפועל בצורה חלקה ומספק את אותה חוויה כמו קודם.–אמן סוני, מוביל טכני, PolicyBazaar"

שאילתות בנוגע למאגר

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

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

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

@property

ולבסוף, בקרוב מאוד, נשמח לראות את @property ב-Baseline. זוהי תכונה חשובה שמאפשרת לספק משמעות סמנטית למאפיינים מותאמים אישית של CSS (שנקראים גם משתני CSS), ופותחת מגוון רחב של תכונות אינטראקטיביות חדשות. ‫@property מאפשר גם משמעות הקשרית, בדיקת סוגים, ערכי ברירת מחדל וערכי חלופה ב-CSS. הוספנו תכונות חזקות יותר, כמו שאילתות בסגנון טווח. זו תכונה שלא הייתה אפשרית בעבר, ועכשיו היא מספקת עומק רב לשפה של CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

סיכום

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

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

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

כדי לקבל מידע נוסף על התכונות החדשות האלה כשהן יושקו, אתם יכולים לעקוב אחרי הבלוגים שלנו בכתובות developer.chrome.com ו-web.dev, שבהם הצוות שלנו משתף את החדשות האחרונות בתחום טכנולוגיות האינטרנט. אתם יכולים לנסות אנימציות מבוססות-גלילה, מעברים בין תצוגות, מיקום עוגן או אפילו את רכיב ה-select שניתן לעיצוב, ולספר לנו מה דעתכם. אנחנו כאן כדי להקשיב ולעזור.