تاريخ النشر: 13 شباط (فبراير) 2025
بعد النجاح الكبير الذي حقّقه Interop 2024، يعود المشروع اليوم بمجموعة جديدة من مجالات التركيز لعام 2025. على الرغم من أنّه لم نتمكّن من تضمين كل اقتراح تم تقديمه هذا العام، تشمل القائمة النهائية منصة الويب بالكامل، بدءًا من CSS ووصولاً إلى الميزات ذات الصلة بالأداء.
مجالات التركيز لعام 2025
- موضع الرابط
backdrop-filter
- مؤشرات أداء الويب الأساسية
- عنصر
<details>
- التنسيق
- الوحدات
- Navigation API
- أحداث المؤشر والماوس
- إزالة أحداث التغيُّر
@scope
- حدث واحد (
scrollend
) - Storage Access API
text-decoration
URLPattern
- View Transition API
- WebAssembly
- التوافق مع الويب
- WebRTC
- أوضاع الكتابة
بالإضافة إلى ذلك، وكما هو الحال في السنوات السابقة، هناك مجموعة من المجالات التي يجب التحقيق فيها. هذه هي المجالات التي لا تتوفّر فيها معلومات أو اختبارات كافية لتضمينها كأحد مجالات التركيز، ولكن ترى المجموعة أنّه يجب بذل بعض الجهود للوصول إلى مرحلة يمكن فيها تضمينها.
- اختبار تسهيل الاستخدام
- اختبار Gamepad API
- اختبار الأجهزة الجوّالة
- اختبار الخصوصية
- WebVTT
نحن متحمّسون لجميع هذه الميزات والتحسينات التي سيقدّمها مشروع هذا العام للمنصّة. وكما هو الحال في العام الماضي، سيوفّر المشروع مجموعة كاملة من العناصر الجديدة في "القاعدة الأساسية". تشارك هذه المشاركة المزيد من المعلومات عن بعض الميزات المدرَجة في القائمة، مع روابط إلى معلومات لمعرفة المزيد.
يمكنك متابعة آخر الأخبار على لوحة بيانات Interop 2025 على الرابط wpt.fyi/interop-2025، وسيتم عرض العناصر التي أصبحت متوفّرة في Baseline حديثًا في قائمة Baseline 2025 على webstatus.dev أيضًا.

CSS وواجهة المستخدم
إنّ العديد من الميزات المضمّنة في Interop 2025 هي ميزات أشار إليها المستخدمون على أنّها مهمة في استطلاع حالة CSS لعام 2024. وستساعدك هذه التحسينات في إنشاء تجارب مستخدمين أكثر جمالًا وكفاءة.
موضع الرابط
تتيح لك هذه الميزة تثبيت عنصر في موضع معيّن بعنصر مرجعي، وهي مفيدة بشكلٍ خاص عند عرض النوافذ المنبثقة.
سيؤدي جعل هذه الميزة جزءًا من Baseline إلى تسهيل إنشاء واجهات المستخدمين بدون الحاجة إلى الاعتماد على مكتبات تابعة لجهات خارجية. يمكنك الاطّلاع على مزيد من المعلومات في مستندات تحديد موضع العنصر المرجعي، وعلى MDN: تحديد موضع عنصر مرجعي في CSS.
عمليات النقل في عرض المستند نفسه
وتشمل هذه السنة أيضًا عمليات انتقال العرض، وعلى وجه التحديد عمليات انتقال عرض
المستند نفسه، وسمة view-transition-class
CSS.
اطّلِع على مزيد من المعلومات عن عمليات الانتقال بين طرق العرض في مقالة عمليات الانتقال بين طرق العرض في المستند نفسه لتطبيقات الصفحة الواحدة ومقالة مستندات MDN حول عمليات الانتقال بين طرق العرض.
سمة backdrop-filter
أصبح الموقع الإلكتروني
backdrop-filter
متاحًا للاستخدام كقاعدة أساسية اعتبارًا من أيلول (سبتمبر) 2024. يتيح لك
إنشاء تأثيرات في الخلفية. على سبيل المثال، تمويه الصور أو إنشاء تأثيرات
قد تتوقّع أن تكون متاحة فقط في تطبيق رسومات
على الرغم من أنّ هذه الحلول متوافقة مع بعضها في معظم الأحيان، يمكنك الاطّلاع على الاختبارات التي تؤدي إلى تعذُّر معالجة
backdrop-filter
للتأكّد من
أنّ هناك أخطاء ومشاكل في عمليات التنفيذ هذه. على الرغم من أنّ هذه المشاكل قد لا تتعلّق ببعض المستخدمين، نعلم أنّ العديد منهم يواجهونها، لذا سيكون من الرائع أن تعمل هذه الميزة بشكل جيد.
العنصر <details>
عنصر <details>
هو تطبيق مصغّر لبيان الإفصاح الذي يمكن توسيعه للاطّلاع على محتوى إضافي. العنصر <details>
نفسه هو "القيمة الأساسية" للعنصر "متاح على نطاق واسع".
ومع ذلك، هناك عدد من الميزات ذات الصلة التي تمت إضافتها مؤخرًا تجعل <details>
أكثر فائدة.
- العنصران الصوريان
::marker
و::details-content
في CSS - استخدام
content-visibility
لتبديل المحتوى بدلاً منdisplay
- توسيع عنصر
<details>
تلقائيًا باستخدام المطابقات في ميزة "البحث في الصفحة" - سمة
hidden="until-found"
التي تخفي عنصرًا إلى أن يتم العثور عليه باستخدام ميزة "البحث في الصفحة" في المتصفّح أو الانتقال إليه مباشرةً من خلال اتّباع جزء من عنوان URL
قاعدة at-rule @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
قاعدة at-rule في CSS وفي مستندات @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
. يُعدّ هذا المعيار متاحًا بشكلٍ أساسي
على نطاق واسع، ولكن في Safari، فإنّ القيمة المختصرة الوحيدة التي تعمل بدون بادئة هي text-decoration-line
. وسنعمل على حلّ هذه المشكلة خلال عام 2025.
أوضاع الكتابة
يحتوي سمة CSS writing-mode
على عدد من القيم المحتملة، تم تصميم العديد منها لتنسيق
النصوص البرمجية التي يتم عرضها عموديًا. في بعض الأحيان، قد تحتاج إلى عرض النص عموديًا كجزء من التصميم، وليس لأسباب تتعلّق بتوافق اللغة. تم تصميم قيم
sideways-lr
وsideways-rl
لهذا الغرض، ولكنّها عانت
من توافق ضعيف مع المتصفّحات. من المفترض أن يتم حلّ هذه المشكلة خلال عام 2025.
بالإضافة إلى ذلك، يتم تضمين سمتَي CSS المنطقيتين overflow-inline
وoverflow-block
. تتيح لك هذه الخيارات التحكّم في ما يحدث عندما يتجاوز المحتوى حدود المربّعات، بغض النظر عن وضع الكتابة.
مؤشرات أداء الويب الأساسية
يمكن أن تساعدك مؤشرات أداء الويب في قياس تجربة موقعك الإلكتروني وتحديد فرص التحسين. تهدف مبادرة Web Vitals إلى تبسيط المشهد، ومساعدة المواقع الإلكترونية على التركيز على المقاييس الأكثر أهمية، وهي "مؤشرات أداء الويب الأساسية".
يتضمّن Interop 2025 مقياسَي سرعة عرض أكبر محتوى مرئي (LCP) ومدى استجابة الصفحة لتفاعلات المستخدم (INP) من خلال تنفيذ واجهتَي برمجة التطبيقات LargestContentfulPaint API وEvent Timing API في جميع المتصفّحات. لا يشمل النطاق مقياس متغيّرات التصميم التراكمية (CLS).
LCP API
Event Timing API (for INP)
WebAssembly (Wasm)
تتيح لك WebAssembly API تحميل رمز WebAssembly، وهو تنسيق تعليمات ثنائي قابل للنقل. يمكن أن يسمح لك ذلك بتنفيذ إجراءات مثل تشغيل تطبيق مدوّنة كامل، بما في ذلك كل متطلبات الخادم، في المتصفّح.
هذا العام، سنركّز على الميزات التالية:
- الدوالّ البرمجية المضمّنة لسلاسل JavaScript: لجعل الدوالّ المضمّنة لسلاسل WebAssembly تعكس مجموعة فرعية من JavaScript String API حتى يمكن استدعاؤها بدون رمز JavaScript لربط الوحدات
- دمج وحدات التخزين القابلة للتغيير: لدمج WebAssembly في رمز JavaScript الذي يستخدم وحدات تخزين قابلة للتغيير.
عمليات إزالة الميزات
هذا العام، يشمل المشروع إزالة المحتوى من المنصة. تم إيقاف أحداث الطفرات نهائيًا وتم استبدالها بواجهة برمجة التطبيقات Mutation Observer التي تحقّق أداءً أفضل وتكون متاحة على نطاق واسع في "القاعدة الأساسية". أزال Chrome هذه الأحداث في الإصدار 126، وهدفنا هو إزالتها من جميع المتصفّحات.
لفهم السجلّ وسبب إزالة هذه الأحداث، يُرجى الاطّلاع على مقالة سيتمّ إيقاف أحداث Mutation نهائيًا في Chrome.
مزيد من المعلومات
يمكن العثور على أوصاف القائمة الكاملة للميزات في README الخاص بالمشروع. يمكنك أيضًا الاطّلاع على المشاركات من الشركات الأخرى التي تعمل على Interop 2025.