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

Una Kravets

פורסם: 14 באוגוסט 2025

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

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

צוות Chrome, בשיתוף פעולה עם ספקי דפדפנים אחרים, גופים לקביעת תקנים כמו CSSWG ו-WHATWG וקבוצות קהילתיות כמו Open UI, מתמקד בהפיכת דפוסי ממשק המשתמש הבסיסיים האלה לפשוטים ליישום.

תפריטי בחירה שניתנים להתאמה אישית

רכיב ה-<select> חיוני לטפסים, אבל בעבר המבנה הפנימי שלו היה מוסתר על ידי הדפדפן, ולכן היה כמעט בלתי אפשרי ליצור סגנון CSS עקבי ומקיף. כדי ליצור <select> טוב יותר, צריך להבין את אבני הבניין שלו – Popover API ו-CSS Anchor Positioning API.

‫Popover API: עכשיו ב-Baseline

תפריט נפתח בהתאמה אישית צריך להציג תיבת אפשרויות צפה שמופיעה מעל כל שאר רכיבי ממשק המשתמש, שקל לסגור אותה ושמנהלת את המיקוד בצורה נכונה. ‫Popover API מטפל בכל זה, והחל מהשנה הוא הגיע לסטטוס Baseline Newly available, כלומר הוא יציב בכל דפדפן מרכזי.

כדי ליצור חלון קופץ צריך שני חלקים: אלמנט הפעלה (כמו <button>) ואלמנט החלון הקופץ עצמו. כדי לקשר ביניהם, נותנים לבועה את המאפיין id ואת המאפיין [popover], ואז מפנים אל id במאפיין [popovertarget] של הלחצן.

‫Popover API מנהל את כל מחזור החיים של הרכיב, ומספק:

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

שדרוג של רכיב <dialog>

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

בעבר, <dialog> לא כלל חלק מהתכונות הנוחות של [popover], אבל המצב הזה משתנה. בעזרת מאפיין closedby="any" החדש, תיבות דו-שיח מודאליות תומכות עכשיו בפונקציונליות של סגירה בלחיצה מחוץ לתיבה, והן נסגרות כשמשתמש לוחץ מחוץ לתיבה או לוחץ על מקש Escape.

בנוסף, רכיבי הפעלה של פקודות ([command] ו-[commandfor]) מספקים דרך הצהרתית ללא JavaScript לקשר לחצן לפעולה, כמו פתיחת תיבת דו-שיח באמצעות command="show-modal".

מיקום של נקודת עיגון ב-CSS

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

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

אפשר לקשר באופן מפורש בין רכיבים באמצעות המאפיינים anchor-name ו-position-anchor, אבל עדכון במפרט וב-Chrome 133 יוצר קשר עוגן מרומז בין <popover> לבין <button> שמפעיל אותו. השינוי הזה מפשט מאוד את הקוד, ועכשיו אפשר למקם את חלון הקופץ באמצעות שורת CSS אחת, כמו: position-area: bottom span-left.

כלי העוגן מ-chrome.dev מראה לכם איך להשתמש ב-position-area כדי לקבל את המיקום הרצוי:

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

<select> שניתן להתאמה אישית

אחרי שבלוקי הבנייה האלה הוטמעו בגרסאות קודמות, סוף סוף הגיעו ל-Chrome 134 סגנונות מקוריים לאינטרנט עבור רכיבי <select>. העדכון כולל את המאפיין החדש appearance, פסאודו-אלמנטים חדשים ואת האלמנט <selectedcontent>.

כדי לבטל את הנעילה של ההתאמה האישית, צריך להחיל את appearance: base-select; על הרכיב <select> ועל פסאודו-הרכיב החדש שלו ::picker(select), שמטרגט את התפריט הנפתח של האפשרויות. הפעולה הזו חושפת חלקים פנימיים חדשים לעיצוב, כולל:

• ‫<selectedcontent>: מייצג את התוכן של האפשרות שנבחרה שמוצגת בלחצן.
• ‫::picker-icon: סמל החץ לתפריט נפתח
• ‫<option>:checked ו-::checkmark: לעיצוב האפשרות שנבחרה וסימן הווי שלה

כך אפשר להציג תוכן עשיר באפשרויות ולשלוט באופן מדויק בתצוגה. לדוגמה, אפשר להציג סמל וכתובית ברשימת האפשרויות, אבל להסתיר אותם במצב סגור באמצעות display: none בתוך selectedcontent.

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

קרוסלות

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

איך מתחילים להשתמש ברכיבי גלילה

כדי ליצור קרוסלה, מתחילים עם רשימת פריטים שגולשים מהקונטיינר שלהם. כדי להסתיר את סרגל הגלילה האופקי ועדיין לאפשר גלילה של התוכן, משתמשים ב-scrollbar-width: none. בנוסף, כדי שהגלילה תהיה חלקה, כדאי להשתמש ב-scroll-snap-type וב-scroll-snap-align, כדי לוודא שהפריטים יקפצו למקומם כשהמשתמש יגלול.

הקודם והבא עם ::scroll-button

האלמנט הווירטואלי החדש ::scroll-button(), שהושק ב-Chrome 135, מורה לדפדפן ליצור לחצני 'הבא' ו'הקודם' נגישים עם שמירת מצב. הדפדפן מטפל אוטומטית בתפקידי ה-ARIA הנכונים, בסדר הכרטיסיות ואפילו משבית את הלחצנים כשמגיעים להתחלה או לסוף – והכול ללא JavaScript נוסף.

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

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

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

ניווט ישיר באמצעות ::scroll-marker

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

בדומה ללחצני גלילה, כדי להפעיל את סמני הגלילה צריך להביע הסכמה באמצעות המאפיין content ולספק תווית נגישה. בדוגמה הבאה, נעשה שימוש במאפיין data כדי להגדיר את התווית של סמן הגלילה. בנוסף, אפשר למקם את סמני הגלילה ב-::scroll-marker-group באמצעות המאפיין scroll-marker-group. לבסוף, מעצבים את הסמן הפעיל באמצעות פסאודו-הקלאס החדש :target-current. דוגמה למראה של קרוסלה בסיסית:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

שאילתות לגבי מצב הגלילה

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

• ‫scroll-state(snapped): מתאים כשאלמנט נמצא במיקום 'מוצמד'. בקרוסלות, זה קורה כשהפריט נצמד למרכז הקרוסלה.
• ‫scroll-state(stuck): עיצוב רכיב, כמו כותרת, כשהרכיב ההורה שלו הופך למוצמד.
• scroll-state(scrollable): להוסיף אינדיקטורים ויזואליים, כמו הבהרה, כדי להראות שיש עוד תוכן שאפשר לגלול אליו.

סיכום

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

קרוסלת התמונות האינטראקטיבית הזו משלבת שאילתות scroll-state(), ::scroll-button, ::scroll-marker, מיקום עוגן CSS ו-:target-current.

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

מידע נוסף על קרוסלות CSS

כרטיסי מידע אינטראקטיביים

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

חלונות קופצים שמופעלים על ידי תחומי עניין עם [interestfor]

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

כדי להמיר חלון קופץ מבוסס-קליקים לחלון קופץ מבוסס-עניין, צריך ליצור רכיב הפעלה, שיכול להיות <button> או <a>, ולהגדיר לו מאפיין [interestfor] ששווה ל-id של הרכיב [popover]. כך זה נראה ב-HTML:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

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

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

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

הפעלת עיצובים

הפעלות שמבוססות על תחומי עניין כוללות כמה יכולות חדשות. אחת מהן היא היכולת לשלוט בעיכובים בכניסה וביציאה באמצעות מאפיין CSS: ‏ interest-target-delay. היכולת השנייה היא לעצב את רכיב ההפעלה בהתאם לכך שהמשתמש הביע בו עניין או לא, באמצעות פסאודו-המחלקות :has-interest.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" וממשק משתמש רב-תכליתי

חלק חשוב בפאזל של ההפעלות לפי תחומי עניין הוא סוג חדש של חלון קופץ: popover="hint". ההבדל העיקרי בין חלון קופץ עם רמז לבין חלונות קופצים אחרים הוא שחלון קופץ עם רמז לא סוגר חלונות קופצים אחרים כשהוא נפתח. האפשרות הזו מתאימה במיוחד לתיבות מידע או לכרטיסי תצוגה מקדימה שצריכים להופיע בלי לסגור תפריט או חלון צ'אט שכבר פתוחים.

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

העתיד הוא הצהרתי

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

מקורות מידע נוספים:

• Popover API
• מיקום העוגן
• כלי העוגנים
• Command Invokers
• תפריטי בחירה שאפשר להתאים אישית (RFC)
• קרוסלות של שירותי CSS
• CSS Carousel Gallery
• כלי ההגדרה של קרוסלת CSS
• שאילתות CSS לגבי מצב הגלילה
• הסבר על Interest Invokers