עדכונים אחרונים בנושא ממשק המשתמש של 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 המובנה הזה מפחית את העומס על הקוד שאתם צריכים לתחזק, בין אם מדובר בסקריפט מותאם אישית שכתבתם או בהכללה של תלות נוספת בצד שלישי. הוא גם מבטל את הצורך לשלוח משקיפי גלילה שונים, מה שאומר שיש לו יתרונות משמעותיים בביצועים. הסיבה לכך היא שאנימציות מבוססות-גלילה פועלות מחוץ לשרשור הראשי כשמנפישים מאפיינים שאפשר להנפיש במרכיב כמו טרנספורמציות ואטימות, בין אם אתם משתמשים בממשק ה-API החדש ישירות ב-CSS או משתמשים ב-JavaScript hooks.

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

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

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

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

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

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

התכונות הספציפיות האלה זמינות כרגע רק ב-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 עצמו.

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

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

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

The Popover API

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

רכיבי חלון קופץ מוסתרים באמצעות 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.
• פונקציית סגירה קלה: לחיצה מחוץ לאזור החלון הקופץ תסגור אותו ותחזיר את המיקוד.
• ניהול ברירת המחדל של המיקוד בכרטיסייה: כשפותחים את החלון הקופץ, המיקוד עובר לכרטיסייה הבאה בתוך החלון הקופץ.
• קישורי מקשים במקלדת המובנית: לחיצה על המקש 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.

בשלב הבא של ה-API של חלונות קופצים, אנחנו עובדים על 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 הזה עדיין נמצא בשלב ניסיוני. עם זאת, אני רוצה לשתף אתכם בהדגמות ובעדכונים על ההתקדמות שלנו, ואשמח לקבל מכם משוב. קודם כול, התקדמנו בהוספת אפשרות להפעלת חוויית בחירה חדשה ומותאמת אישית. הדרך הנוכחית לעשות זאת, שנמצאת עדיין בשלבי פיתוח, היא להשתמש במאפיין appearance ב-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 הזה הוא תאימות לאחור. בבחירת המדינה הזו, אפשר לראות ממשק משתמש מותאם אישית עם תמונות של דגלים באפשרויות, כדי שהמשתמשים יוכלו להבין את התוכן בקלות רבה יותר. דפדפנים שלא תומכים בתכונה הזו יתעלמו מהשורות שהם לא מבינים, כמו לחצן בהתאמה אישית, רשימת נתונים, אפשרות שנבחרה ותמונות בתוך האפשרויות. לכן, חזרה למצב הקודם תהיה דומה לממשק המשתמש הנוכחי של ברירת המחדל לבחירה.

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

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

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

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

<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 הושקה בכל הדפדפנים בשנה שעברה, ומאז היא שופרה כדי לתמוך ב-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() של הבורר

ואם כבר מדברים על ממשקי משתמש מודרניים, חשוב לי לציין את אחת התכונות המשמעותיות ביותר שנוספו בשנה האחרונה, והיא  selector, שהושקה בדפדפנים בדצמבר של השנה שעברה.:has() ה-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 שניתן לעיצוב, ולספר לנו מה דעתכם. אנחנו כאן כדי להקשיב ולעזור.