تاریخ انتشار: 13 فوریه 2025
پس از موفقیت عظیم Interop 2024، پروژه امروز با مجموعه جدیدی از مناطق تمرکز برای سال 2025 بازگشته است. در حالی که ما نتوانستیم همه پیشنهادات ارائه شده را در سال جاری لحاظ کنیم، لیست نهایی در سراسر پلتفرم وب - از CSS گرفته تا ویژگیهای مرتبط با عملکرد - میرسد.
مناطق تمرکز برای سال 2025
- موقعیت لنگر
-
backdrop-filter
- Core Web Vitals
- عنصر
<details>
- طرح بندی
- ماژول ها
- Navigation API
- رویدادهای اشاره گر و ماوس
- حذف رویدادهای جهش
-
@scope
- رویداد
scrollend
- Storage Access API
-
text-decoration
-
URLPattern
- مشاهده API انتقال
- WebAssembly
- سازگار با وب
- WebRTC
- حالت های نوشتن
علاوه بر این، و مانند سال های گذشته، مجموعه ای از زمینه ها برای بررسی وجود دارد. اینها حوزههایی هستند که ما اطلاعات یا آزمایشهای کافی برای گنجاندن آنها به عنوان حوزه تمرکز نداریم، اما گروه احساس میکند باید کارهایی انجام شود تا آنها را به مرحلهای برسانیم که بتوانیم آنها را وارد کنیم.
- تست دسترسی
- تست API Gamepad
- تست موبایل
- تست حریم خصوصی
- WebVTT
ما در مورد همه این ویژگیها و پیشرفتهایی که پروژه امسال برای پلتفرم به ارمغان میآورد هیجانزده هستیم. و مانند سال گذشته ، این پروژه مجموعه کاملی از چیزها را به تازگی در دسترس قرار خواهد داد. این پست اطلاعات بیشتری را در مورد برخی از ویژگی های موجود در لیست به اشتراک می گذارد و پیوندهایی به اطلاعات برای کسب اطلاعات بیشتر ارائه می دهد.
میتوانید در داشبورد Interop 2025 در wpt.fyi/interop-2025 دنبال کنید و با تبدیل شدن به Baseline جدید، در لیست Baseline 2025 در webstatus.dev نیز نمایش داده میشوند.

CSS و UI
تعدادی از ویژگیهای گنجانده شده در Interop 2025 ویژگیهایی هستند که در نظرسنجی State of CSS 2024 آنها را بهعنوان مهم علامتگذاری کردهاید. آنها به شما کمک می کنند تا تجربیات کاربری زیباتر و کاربردی تری ایجاد کنید.
موقعیت لنگر
این ویژگی به شما امکان میدهد یک عنصر موقعیتیافته را به یک لنگر متصل کنید، این ویژگی بهویژه هنگام نمایش پاپاورها مفید است.
قرار دادن این ویژگی بخشی از Baseline، ایجاد رابط های کاربری را بسیار آسان تر می کند، بدون اینکه به کتابخانه های شخص ثالث تکیه کنید. در مستندات موقعیت یابی لنگر ما و همچنین در مورد موقعیت یابی لنگر MDN-CSS بیشتر بیاموزید.
انتقال نمای همان سند
همچنین در این سال، انتقالهای view، بهویژه انتقالهای نمای همان سند، و ویژگی CSS view-transition-class
گنجانده شده است.
درباره انتقالهای مشاهده در انتقالهای نمای همان سند برای برنامههای تک صفحهای و در اسناد MDN برای انتقال مشاهده بیشتر بیاموزید.
ویژگی backdrop-filter
ویژگی backdrop-filter
از سپتامبر 2024 به تازگی در دسترس بوده است. این ویژگی به شما امکان می دهد در پشت محتوای خود جلوه هایی ایجاد کنید. به عنوان مثال برای محو کردن یا ایجاد افکت هایی که ممکن است انتظار داشته باشید فقط در یک برنامه گرافیکی موجود باشد.
علیرغم اینکه عمدتاً قابلیت همکاری دارد، می توانید از تست های ناموفق برای backdrop-filter
متوجه شوید که اشکالات و مشکلاتی در این پیاده سازی ها وجود دارد. اگرچه ممکن است این مشکلات برای همه مشکل ساز نباشد، اما می دانیم که بسیاری از شما با آنها مواجه می شوید، بسیار عالی است که این ویژگی به خوبی کار کند.
عنصر <details>
عنصر <details>
یک ویجت افشا است که می تواند برای نمایش محتوای اضافی گسترش یابد. خود عنصر <details>
Baseline به طور گسترده در دسترس است. با این حال، تعدادی ویژگی مرتبط وجود دارد که اخیراً اضافه شدهاند که <details>
را مفیدتر میکنند .
- شبه عناصر
::marker
و::details-content
CSS. - استفاده از
content-visibility
برای تغییر محتوا به جایdisplay
. - گسترش خودکار عنصر
<details>
با موارد منطبق در صفحه. - ویژگی
hidden="until-found"
که یک عنصر را پنهان می کند تا زمانی که با استفاده از جستجوی جستجو در صفحه مرورگر پیدا شود یا مستقیماً با دنبال کردن یک قطعه URL به آن هدایت شود.
CSS @scope
at-rule
@scope
at-rule به شما این امکان را میدهد که انتخابگرهای خود را به زیر درختی از DOM محدود کنید، یا حتی بین یک مرز بالا و پایین در درخت انتخاب کنید. برای مثال، CSS زیر فقط عناصر <img>
را در داخل یک عنصر با کلاس .card
انتخاب میکند.
@scope (.card) {
img {
border-color: green;
}
}
در مثال بعدی از کران بالا و پایین استفاده شده است. عنصر <img>
فقط در صورتی انتخاب میشود که بین عنصر با کلاس .card
و همچنین خارج از عنصر با کلاس .card__content
باشد.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
نمونههای بیشتری از نحوه استفاده @scope
در محدود کردن دسترسی انتخابگرهای خود با CSS @scope
at-rule و در اسناد @scope
در MDN بیابید.
رویداد scrollend
بدون رویداد scrollend
، هیچ راه قابل اعتمادی برای تشخیص کامل بودن اسکرول وجود ندارد. بهترین کاری که می توانید انجام دهید این است که از setTimeout()
برای بررسی اینکه آیا اسکرول برای یک نقطه متوقف شده است استفاده کنید. این باعث میشود که بیشتر شبیه یک رویداد پیمایش شده باشد، نه یک رویداد پایان یافته است.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
با رویداد scrollend
، مرورگر این همه ارزیابی دشوار را برای شما انجام می دهد.
document.onscrollend = event => {
// ...
}
نمونههای بیشتری را در اسکرولند، یک رویداد جدید جاوا اسکریپت و همچنین در مستندات MDN برای scrollend
ببینید.
خاصیت text-decoration
ویژگی text-decoration
مخفف text-decoration-line
، text-decoration-color
، text-decoration-style
و text-decoration-thickness
است. به نظر می رسد خط پایه به طور گسترده در دسترس است، اما در سافاری تنها ویژگی کوتاه نویسی بدون پیشوندی که کار می کند text-decoration-line
است. این موردی است که در سال 2025 مورد توجه قرار خواهد گرفت.
حالت های نوشتن
ویژگی CSS writing-mode
دارای تعدادی مقادیر ممکن است که بسیاری از آنها برای چیدمان اسکریپت هایی طراحی شده اند که به صورت عمودی نمایش داده می شوند. با این حال، گاهی اوقات، شما می خواهید متن را به صورت عمودی به عنوان بخشی از طراحی قرار دهید، نه به دلایل پشتیبانی از زبان. مقادیر sideways-lr
و sideways-rl
برای این کار طراحی شده اند، اما از سازگاری ضعیف مرورگر رنج می برند. این باید در طول سال 2025 برطرف شود.
علاوه بر این، ویژگی های منطقی CSS overflow-inline
و overflow-block
گنجانده شده است. این امکان را فراهم میکند تا بدون توجه به حالت نوشتن، کنترل کنید که چه اتفاقی میافتد وقتی محتوا از جعبهها سرریز میشود.
Core Web Vitals
Web Vitals می تواند به شما در تعیین کمیت تجربه سایت و شناسایی فرصت های بهبود کمک کند. هدف ابتکار Web Vitals سادهسازی چشمانداز است و به سایتها کمک میکند تا بر معیارهایی که بیشترین اهمیت را دارند، یعنی Core Web Vitals تمرکز کنند.
Interop 2025 شامل معیارهای Largest Contentful Paint (LCP) و Interaction to Next Paint (INP) با اجرای LargestContentfulPaint API و Event Timing API در مرورگرها است. متریک تغییر چیدمان تجمعی (CLS) در محدوده نیست.
LCP API
API زمانبندی رویداد (برای INP)
WebAssembly (Wasm)
WebAssembly API به شما امکان می دهد کد WebAssembly را بارگیری کنید، یک فرمت دستورالعمل باینری قابل حمل. این میتواند به شما اجازه دهد کارهایی مانند اجرای یک برنامه وبلاگ کامل ، از جمله تمامی نیازهای سرور، در مرورگر انجام دهید!
امسال، کار بر روی ویژگی های زیر متمرکز خواهد شد:
- سازه های رشته جاوا اسکریپت: برای اینکه توابع رشته داخلی WebAssembly منعکس کننده زیرمجموعه ای از API رشته جاوا اسکریپت باشند تا بتوان آن را بدون کد چسب جاوا اسکریپت فراخوانی کرد.
- ادغام بافرهای قابل تغییر اندازه: برای ادغام WebAssembly در کد جاوا اسکریپت که از بافرهای قابل تغییر اندازه استفاده می کند.
حذف ویژگی ها
امسال این پروژه شامل حذف از پلت فرم است. رویدادهای جهش منسوخ شده و با API بسیار کارآمدتر و کاملاً در دسترس Mutation Observer جایگزین شدهاند. کروم این رویدادها را در کروم 126 حذف کرد و این منطقه تمرکز حذف آنها از همه مرورگرها است.
برای درک تاریخچه و دلیل حذف این رویدادها، رویدادهای جهش از Chrome حذف خواهند شد .
بیشتر بدانید
توضیحات لیست کامل ویژگی ها را می توان در پروژه README یافت. همچنین، پست های سایر شرکت هایی که در Interop 2025 کار می کنند را بخوانید.