תאריך פרסום: 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.

CSS וממשק משתמש
חלק מהתכונות שכלולות ב-Interop 2025 הן תכונות שציינתם כחשובות בסקר 'מצב CSS בשנת 2024'. הם יעזרו לכם ליצור חוויית משתמש יפה יותר עם ביצועים טובים יותר.
מיקום של עוגן
התכונה הזו מאפשרת לתקוע אלמנט ממוקם ל-anchor, והיא שימושית במיוחד כשמציגים חלונות קופצים.
הוספת התכונה הזו ל-Baseline תאפשר ליצור ממשקי משתמש בקלות רבה יותר, בלי להסתמך על ספריות של צד שלישי. מידע נוסף זמין במסמכי העזרה שלנו בנושא מיקום עוגנים, וגם ב-MDN – מיקום עוגנים ב-CSS.
מעברים בין תצוגות של אותו מסמך
השנה נוספו גם מעברים בין תצוגות, במיוחד מעברים בין תצוגות באותו מסמך, ומאפיין ה-CSS view-transition-class
.
מידע נוסף על מעברים בין תצוגות זמין במאמר מעברים בין תצוגות באותו מסמך לאפליקציות של דף יחיד ובמסמכי העזרה של MDN בנושא מעברים בין תצוגות.
הנכס backdrop-filter
הנכס 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
כלל 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
בלי האירוע scrollend
, אין דרך מהימנה לזהות שגלילה הושלמה. הפתרון הטוב ביותר הוא להשתמש ב-setTimeout()
כדי לבדוק אם הגלילה הופסקה לתקופה מסוימת. כך האירוע דומה יותר לאירוע מסוג 'הגלילה הושהתה' ולא לאירוע מסוג 'הגלילה הסתיימה'.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
בעזרת האירוע scrollend
, הדפדפן מבצע בשבילכם את כל ההערכות הקשות האלה.
document.onscrollend = event => {
// ...
}
דוגמאות נוספות זמינות במאמר Scrollend, אירוע חדש ב-JavaScript וגם במסמכי התיעוד של MDN בנושא scrollend
.
הנכס text-decoration
המאפיין 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.
בנוסף, נכללים מאפייני ה-CSS הלוגיים overflow-inline
ו-overflow-block
. בעזרת ההגדרות האלה אפשר לקבוע מה יקרה כשהתוכן יחרוג מהתיבות, ללא קשר למצב הכתיבה.
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
Event Timing API (ל-INP)
WebAssembly (Wasm)
WebAssembly API מאפשר לטעון קוד WebAssembly, שהוא פורמט של הוראות בינאריות ניידות. אפשר להשתמש בו כדי להריץ אפליקציית בלוג שלמה, כולל כל דרישות השרת, בדפדפן.
השנה, העבודה תתמקד בתכונות הבאות:
- פונקציות מחרוזת מובנות של JavaScript: כדי שפונקציות המחרוזת המובנות של WebAssembly ישקפו קבוצת משנה של JavaScript String API, כך שניתן יהיה להפעיל אותן בלי קוד דבק של JavaScript.
- שילוב של מאגרים שניתן לשנות את הגודל שלהם: כדי לשלב WebAssembly בקוד JavaScript שמשתמש במאגרים שניתן לשנות את הגודל שלהם.
הסרות של תכונות
השנה הפרויקט כולל הסרה מהפלטפורמה. אירועי המוטציה הוצאו משימוש והוחלפו ב-Mutation Observer API, שמניב ביצועים טובים יותר וזמין ב-Baseline באופן נרחב. האירועים האלה הוסרו מ-Chrome בגרסה 126, והמטרה של תחום ההתמקדות הזה היא להסיר אותם מכל הדפדפנים.
כדי להבין את ההיסטוריה ולגלות למה האירועים האלה יוסרו, כדאי לקרוא את המאמר אירועי מוטציה יוסרו מ-Chrome.
מידע נוסף
תיאורים של רשימת התכונות המלאה מופיעים בREADME של הפרויקט. כדאי גם לקרוא את הפוסטים של החברות האחרות שעובדות על Interop 2025.