עדכונים אחרונים בנושא ממשק המשתמש של 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 או באמצעות ה-hooks של JavaScript.

לאחרונה, 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 (קבוצת העבודה של Web Hypertext Application Technology).

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

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

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

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

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

יכול להיות שאתם כבר משתמשים ב-Popover API בלי לדעת. ב-GitHub הטמיעו חלון קופץ בתפריט 'חדש' בדף הבית ובסקירה הכללית של בקשת המשיכה. הם שיפרו את התכונה הזו בהדרגה באמצעות פוליפיל של חלון קופץ, שנבנה על ידי 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 למיקום עוגן שנקרא inset area. האזור המובלע מאפשר למקם בקלות אלמנטים ממוקמים ביחס לנקודות העיגון שלהם, והוא פועל ברשת של 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.

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

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