Interop 2025: שנה נוספת של שיפורים בפלטפורמת האינטרנט

תאריך פרסום: 13 בפברואר 2025

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

תחומי ההתמקדות לשנת 2025

  • מיקום של עוגן
  • backdrop-filter
  • Core Web Vitals
  • רכיב <details>
  • פריסה
  • מודולים
  • Navigation API
  • אירועי סמן ועכבר
  • הסרת אירועי Mutation
  • @scope
  • אירוע אחד (scrollend)
  • Storage Access API
  • text-decoration
  • URLPattern
  • הצגת Transition API
  • WebAssembly
  • תאימות לאינטרנט
  • WebRTC
  • מצבי כתיבה

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

  • בדיקת נגישות
  • בדיקת Gamepad API
  • בדיקות לנייד
  • בדיקות פרטיות
  • WebVTT

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

אפשר לעקוב אחרי העדכונים בלוח הבקרה של Interop 2025 בכתובת wpt.fyi/interop-2025. כשתכונות יהיו זמינות ב-Baseline, הן יופיעו גם ברשימת Baseline 2025 בכתובת webstatus.dev.

הציונים בתחילת הפרויקט: Interop:‏33, Investigations:‏0, Chrome Canary:‏91, Edge Dev:‏88, Firefox Nightly:‏52, Safari Technology Preview:‏55.
לוח הבקרה של Interop 2025 (נכון ל-13 בפברואר 2025).

CSS וממשק משתמש

חלק מהתכונות שכלולות ב-Interop 2025 הן תכונות שציינתם כחשובות בסקר 'מצב CSS בשנת 2024'. הם יעזרו לכם ליצור חוויית משתמש יפה יותר עם ביצועים טובים יותר.

מיקום של עוגן

Browser Support

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

Source

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

עוגן עם רכיב שמיקומו נקבע.

הוספת התכונה הזו ל-Baseline תאפשר ליצור ממשקי משתמש בקלות רבה יותר, בלי להסתמך על ספריות של צד שלישי. מידע נוסף זמין במסמכי העזרה שלנו בנושא מיקום עוגנים, וגם ב-MDN – מיקום עוגנים ב-CSS.

מעברים בין תצוגות של אותו מסמך

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

השנה נוספו גם מעברים בין תצוגות, במיוחד מעברים בין תצוגות באותו מסמך, ומאפיין ה-CSS‏ view-transition-class.

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

הנכס backdrop-filter

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

הנכס backdrop-filter זמין כ-Baseline Newly מאז ספטמבר 2024. היא מאפשרת ליצור אפקטים מאחורי התוכן. לדוגמה, כדי לטשטש או ליצור אפקטים שאפשר לצפות שיהיו זמינים רק באפליקציית גרפיקה.

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

הרכיב <details>

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

  • פסאודו-רכיבי ה-CSS ::marker ו-::details-content.
  • שימוש ב-content-visibility כדי להחליף את התוכן במקום ב-display.
  • הרחבה אוטומטית של הרכיב <details> עם התאמות של חיפוש בדף.
  • המאפיין hidden="until-found", שמסתיר אלמנט עד שהוא נמצא באמצעות חיפוש בדף בדפדפן, או עד שמנווטים אליו ישירות דרך קטע של כתובת URL.

כלל הכרוכית @scope של CSS

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

כלל at-rule‏ @scope מאפשר לכם להגדיר את היקף הסלקטורים לעץ משנה של ה-DOM, או אפילו לבחור בין גבול עליון לגבול תחתון בעץ. לדוגמה, הקוד הבא ב-CSS בוחר רק רכיבי <img> בתוך אלמנט עם הכיתה .card.

@scope (.card) {
  img {
    border-color: green;
  }
}

בדוגמה הבאה נעשה שימוש בגבול עליון ובגבול תחתון. הרכיב <img> נבחר רק אם הוא נמצא בין הרכיב עם הכיתה .card וגם מחוץ לרכיב עם הכיתה .card__content.

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

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

האירוע scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

בלי האירוע scrollend, אין דרך מהימנה לזהות שגלילה הושלמה. הפתרון הטוב ביותר הוא להשתמש ב-setTimeout() כדי לבדוק אם הגלילה הופסקה לתקופה מסוימת. כך האירוע דומה יותר לאירוע מסוג 'הגלילה הושהתה' ולא לאירוע מסוג 'הגלילה הסתיימה'.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

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

document.onscrollend = event => {
  // ...
}

דוגמאות נוספות זמינות במאמר Scrollend, אירוע חדש ב-JavaScript וגם במסמכי התיעוד של MDN בנושא scrollend.

הנכס text-decoration

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

המאפיין text-decoration הוא קיצור דרך ל-text-decoration-line,‏ text-decoration-color,‏ text-decoration-style ו-text-decoration-thickness. הוא נחשב לנכס ברמת Baseline שזמין באופן נרחב, אבל ב-Safari הנכס היחיד עם קיצור דרך ללא קידומת שעובד הוא text-decoration-line. זה מה שנטפל בו במהלך 2025.

מצבי כתיבה

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

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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

Browser Support

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

Source

Core Web Vitals

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

Interop 2025 כולל את המדדים Largest Contentful Paint ‏ (LCP) ו-Interaction to Next Paint ‏ (INP) באמצעות הטמעה של LargestContentfulPaint API ו-Event Timing API בדפדפנים השונים. המדד Cumulative Layout Shift ‏ (CLS) לא נכלל בהיקף.

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (ל-INP)

Browser Support

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

Source

WebAssembly‏ (Wasm)

WebAssembly API מאפשר לטעון קוד WebAssembly, שהוא פורמט של הוראות בינאריות ניידות. אפשר להשתמש בו כדי להריץ אפליקציית בלוג שלמה, כולל כל דרישות השרת, בדפדפן.

השנה, העבודה תתמקד בתכונות הבאות:

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

הסרות של תכונות

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

כדי להבין את ההיסטוריה ולגלות למה האירועים האלה יוסרו, כדאי לקרוא את המאמר אירועי מוטציה יוסרו מ-Chrome.

מידע נוסף

תיאורים של רשימת התכונות המלאה מופיעים בREADME של הפרויקט. כדאי גם לקרוא את הפוסטים של החברות האחרות שעובדות על Interop 2025.