מה חדש בממשק המשתמש האינטרנטי

Bramus
Una Kravets

תאריך פרסום: 1 ביולי 2026

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

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

חלק 1: כיבוד העדפות המשתמשים

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

1. contrast-color()

פונקציית ה-CSS‏ contrast-color() מקבלת צבע קלט ומחזירה אוטומטית את הצבע black או white, בהתאם לצבע עם הניגודיות הגבוהה יותר ביחס לצבע הקלט, על סמך אלגוריתם הניגודיות המינימלית של WCAG AA. כך אפשר לוודא שהטקסט קריא בלי לשמור באופן ידני זוגות של צבעי טקסט ורקע.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

מידע נוסף על "contrast-color()"

2. light-dark()

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

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

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

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. פונקציות CSS בהתאמה אישית (@function)

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

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

4. שאילתות בנוגע לסגנון מאגר

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

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

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

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

5. הפונקציה if() של CSS

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

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

בהדגמה הקודמת, הפונקציה if() משמשת ליצירת בסיס של צבע ניגודיות מעוצב על סמך הפלט של הפונקציה contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

‫6. @supports at-rule()

הפונקציה at-rule() ב-CSS לשימוש עם @supports מאפשרת למפתחים לזהות תכונות כדי לדעת אם דפדפן מזהה כלל ספציפי של ‎@‎, כמו @starting-style או @view-transition.

לדוגמה, כדי לבדוק אם יש תמיכה ב-@function, משתמשים בה באופן הבא:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

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

מידע נוסף על "@supports at-rule"

‫7. <meta name="text-scale">

תג ה-meta של ה-HTML‏ text-scale מאפשר להגדיר את גודל הגופן הראשוני של רכיב הבסיס <html> בדף כך שיהיה יחסי להגדרות של גודל הטקסט ברמת מערכת ההפעלה והדפדפן. זה חשוב במיוחד לפלטפורמות לנייד.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

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

מידע נוסף על "<meta name=text-scale>"

חלק 2: הטמעה של אינטראקציות טבעיות

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

8. פונקציית linear() easing

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

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

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

מידע נוסף על "linear()"

‫9. @starting-style

כלל ה-CSS‏ @starting-style מגדיר את ערכי ההתחלה של מאפיינים ברכיב שרוצים ליצור ממנו מעבר, כשהרכיב מוצג לראשונה ב-DOM או כשהערך של display משתנה מ-none לערך גלוי, כדי לאפשר מעברים חלקים של כניסה.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

בהדגמה הקודמת, נעשה שימוש בזה כדי להוסיף אנימציה ל-<dialog> כשהוא הופך לגלוי בפעם הראשונה.

‫10. transition-behavior: allow-discrete

המאפיין transition-behavior (שמשמש לעיתים קרובות כ-allow-discrete בקיצור transition) מאפשר מעבר בין מאפיינים נפרדים כמו display או overlay, וכך מוודא שהרכיבים יישארו גלויים במהלך אנימציות היציאה לפני שהם מוסתרים.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() וגם sibling-count()

הפונקציות sibling-index() ו-sibling-count() CSS מחזירות מספרים שלמים שמייצגים את המיקום של רכיב מסוים מתוך קבוצת רכיבים מאותו סוג (החל מ-1) ואת המספר הכולל של רכיבים מאותו סוג, בהתאמה. הן מושלמות לחישוב דינמי של השהיות באנימציה מדורגת ב-CSS בלי JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

בדמו הזה, התוכן של תיבת הדו-שיח מוצג בהדרגה באמצעות התג sibling-index() בתג animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. סגירה קלה של תיבת דו-שיח (מאפיין closedby)

המאפיין closedby ברכיב <dialog> (עם הערך any) מאפשר להשתמש בהתנהגות הצהרתית של סגירה קלה, ולסגור באופן אוטומטי תיבות דו-שיח מודאליות כשלוחצים מחוץ להן או כשלוחצים על ESC, בלי צורך ב-JavaScript מותאם אישית.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

אפשר לנסות את זה בהדגמה הקודמת.

‫13. corner-shape

מאפיין הקיצור הניסיוני corner-shape מאפשר למפתחים לשנות פינות מעוגלות (מ-border-radius) כדי ליצור צורות חזותיות מותאמות אישית כמו bevel, scoop, notch או squircle (דרך superellipse()). גבולות, צללים וקווי מתאר של מיקוד מותאמים לצורה באופן אוטומטי.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

חלק 3: מתן ניווט מודרך

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

14. מעברים בין תצוגות באותו מסמך

מעברים באותו מסמך הם חלק מ-View Transition API. הם מספקים מנגנון ליצירת אנימציה בין מצבי DOM באפליקציות של דף יחיד (SPA) על ידי צילום תמונות והעברתן באמצעות CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

מידע נוסף על מעברים בין תצוגות באותו מסמך

15. מעברים בין תצוגות של מסמכים

ה-API של מעברי תצוגה מורחב לאפליקציות מרובות דפים (MPA), ומאפשר ליצור מעברים חלקים עם אנימציה כשעוברים בין מסמכים שונים על ידי התאמת רכיבים עם אותו view-transition-name בדפים.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

מידע נוסף על מעברים בין תצוגות במסמכים שונים

16. מעברי תצוגה בהיקף רכיב

התכונה element-scoped view transitions הושקה ב-Chrome בגרסה 147. היא מאפשרת להפעיל מעבר בין תצוגות רק בעץ משנה ספציפי של DOM (באמצעות element.startViewTransition()), תוך שמירה על פעילות ואינטראקטיביות של שאר הדף.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

כשמתחילים מעבר תצוגה בהיקף של רכיב, הוא פועל בבידוד: הוא סורק רק את עץ המשנה הזה כדי למצוא רכיבים עם view-transition-name, והפסאודו ::view-transition מוזרק לשורש ההיקף עצמו. הבידוד מתאפשר בזכות היישום האוטומטי של view-transition-scope: all.

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

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

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

מידע נוסף על מעברים בין תצוגות בהיקף של רכיב

17. מעברים בין תצוגות בשני שלבים

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

מידע נוסף על מעברים בין תצוגות בשני שלבים

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

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

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

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

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

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

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

‫20. scroll-target-group: auto

עכשיו אפשר ליצור רכיב CSS מקורי למעקב אחר גלילה, שמדגיש באופן אוטומטי קישורי ניווט על סמך מיקום הגלילה של המשתמש. אם מגדירים את scroll-target-group: auto ברשימת ניווט, הדפדפן מגדיר באופן אוטומטי את aria-current="true" ומחיל את פסאודו-המחלקות :target-current על הקישור הפעיל. אחר כך אפשר להשתמש ב-:target-current כדי להוסיף סגנון לקישורים הפעילים.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

מידע נוסף על CSS scroll-spy עם scroll-target-group

21. אפשרות scrollIntoView() מאגר

ה-method‏ scrollIntoView() כולל עכשיו את האפשרות container. הגדרת target.scrollIntoView({container: 'nearest'}) מגבילה את הגלילה לרכיב הגלילה הקרוב ביותר ברמת ההיררכיה, במקום לאפשר לה לעלות עד למעלה, וכך מונעת גלילה ברמת הדף שעלולה לגרום לבלבול.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

משתמשים בתיבת הסימון בהדגמה הזו כדי להפעיל או להשבית את האפשרות:

מידע נוסף על "container: "nearest""

22. גלילה פרוגרמטית שניתן להמתין לה

כל השיטות הפרוגרמטיות לגלילה (כמו scroll(),‏ scrollTo() ו-scrollIntoView()) מחזירות עכשיו Promise. כך מפתחים יכולים await את השלמת האנימציות של הגלילה החלקה לפני הפעלת לוגיקה עוקבת (כמו הוספת אפקט הדגשה).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

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

חלק 4: הגדלת התוכן, הפחתת הרעש

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

23. שאילתות של מצב הגלילה (scrolled)

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

מידע נוסף על התבנית 'סרגל נסתר'

24. שאילתות בנוגע למאגר עם מיקום קבוע

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

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

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

25. CSS border-shape

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

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. הפונקציה shape() של CSS

הפונקציה shape() ב-CSS מאפשרת להגדיר נתיבים גיאומטריים מורכבים בשורת CSS. אפשר להשתמש בו עם מאפיינים כמו clip-path,‏ border-shape או shape-outside כדי ליצור צורות אורגניות לא מלבניות שהתוכן יכול להיות מוצמד אליהן.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. מיקום קבוע לכל ציר

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

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

התכונה הזו זמינה לבדיקה ב-Chrome 148 עם הדגל Experimental Web Platform Features (תכונות ניסיוניות של פלטפורמת האינטרנט) מופעל.

מידע נוסף על position: sticky לכל ציר

חלק 5: התאמה לגורם הצורה

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

28. מחוות גלילה מעבר לקצה (אזורים שאפשר להחליק בהם)

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

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

מידע נוסף על מחוות גלילה מעבר לקצה

29. HTML-in-Canvas

‫HTML-in-Canvas API הוא שינוי פרדיגמה משמעותי, שמאפשר למפתחים להציב רכיבי DOM אמיתיים בתוך <canvas> (באמצעות המאפיין layoutsubtree). האלמנטים האלה נשארים ניתנים לחיפוש, נגישים ותומכים בתכונות של הדפדפן כמו מילוי אוטומטי, ובמקביל מאפשרים ל-shaders של WebGL/WebGPU ליצור איתם אינטראקציה באופן מקורי.

סיבוב בזק

סקירה מהירה של כמה תכונות עוצמתיות אחרות שמקדמות את האינטרנט.

30. העברה ששומרת את מצב ה-DOM (moveBefore())

שיטת ה-DOM‏ moveBefore() מאפשרת לשנות את ההורה של צמתי DOM (לדוגמה, הפעלת סרטונים, iframe או קלט ממוקד) בלי להרוס את המצב שלהם או להפעיל טעינה מחדש.

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

מידע נוסף על "moveBefore()"

‫31. CSS text-fit

‫text-fit היא תכונת CSS ניסיונית שמשנה באופן דינמי את גודל הגופן כדי להתאים במדויק את שורות הטקסט לרוחב המדויק של רכיב ההכלה שלהן (לדוגמה, text-fit: grow per-line-all).

מידע נוסף על "text-fit"

‫32. שירות CSS text-box (text-box-trim ו-text-box-edge)

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

מידע נוסף על "text-trim"

‫33. קישוטים של רווחים ב-CSS

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

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

מידע נוסף על קישוטים של רווחים ב-CSS

‫34. יחידות של אזור תצוגה שמתחשבות בסרגל הגלילה (vw,‏ vh וכו')

יחידות של אזור התצוגה כמו vw ו-vh מחסירות באופן אוטומטי את הגודל של סרגלי הגלילה (אם מובטח שהם יהיו גלויים, באמצעות overflow-y: scroll או scrollbar-gutter: stable שהוגדרו ב-:root), כדי למנוע גלישה אופקית מקרית כשמגדירים רכיבים ל-100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

מידע נוסף על יחידות של אזור תצוגה שמתחשבות בסרגל הגלילה

‫35. גישה של JavaScript לרכיבים פסאודו

ממשקי API לאינטרנט חושפים עכשיו פסאודו-אלמנטים של CSS (כמו ::before או ::after) ל-JavaScript.

אפשר לאחזר מופע CSSPseudoElement באמצעות Element.pseudo(type) ולבדוק איזה פסאודו-אלמנט הפעיל אירוע באמצעות Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

מידע נוסף על "CSSPseudoElement"

סיכום

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