Interop 2025: عام آخر من التحسينات على منصة الويب

تاريخ النشر: 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 أيضًا.

كانت النتائج في بداية المشروع كالتالي: التوافق: 33، التحقيقات: 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

تتيح لك هذه الميزة تثبيت عنصر في موضع معيّن بعنصر مرجعي، وهي مفيدة بشكلٍ خاص عند عرض النوافذ المنبثقة.

عنصر ربط مع عنصر في موضع معيّن

سيؤدي جعل هذه الميزة جزءًا من Baseline إلى تسهيل إنشاء واجهات المستخدمين بدون الحاجة إلى الاعتماد على مكتبات تابعة لجهات خارجية. يمكنك الاطّلاع على مزيد من المعلومات في مستندات تحديد موضع العنصر المرجعي، وعلى MDN: تحديد موضع عنصر مرجعي في CSS.

عمليات النقل في عرض المستند نفسه

Browser Support

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

Source

وتشمل هذه السنة أيضًا عمليات انتقال العرض، وعلى وجه التحديد عمليات انتقال عرض المستند نفسه، وسمة view-transition-class CSS.

اطّلِع على مزيد من المعلومات عن عمليات الانتقال بين طرق العرض في مقالة عمليات الانتقال بين طرق العرض في المستند نفسه لتطبيقات الصفحة الواحدة ومقالة مستندات MDN حول عمليات الانتقال بين طرق العرض.

سمة backdrop-filter

Browser Support

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

Source

أصبح الموقع الإلكتروني 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

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 قاعدة at-rule في CSS وفي مستندات @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. يُعدّ هذا المعيار متاحًا بشكلٍ أساسي على نطاق واسع، ولكن في 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

مؤشرات أداء الويب الأساسية

يمكن أن تساعدك مؤشرات أداء الويب في قياس تجربة موقعك الإلكتروني وتحديد فرص التحسين. تهدف مبادرة Web Vitals إلى تبسيط المشهد، ومساعدة المواقع الإلكترونية على التركيز على المقاييس الأكثر أهمية، وهي "مؤشرات أداء الويب الأساسية".

يتضمّن Interop 2025 مقياسَي سرعة عرض أكبر محتوى مرئي (LCP) ومدى استجابة الصفحة لتفاعلات المستخدم (INP) من خلال تنفيذ واجهتَي برمجة التطبيقات LargestContentfulPaint API وEvent Timing API في جميع المتصفّحات. لا يشمل النطاق مقياس متغيّرات التصميم التراكمية (CLS).

LCP API

Browser Support

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

Source

Event Timing API (for 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 التي تحقّق أداءً أفضل وتكون متاحة على نطاق واسع في "القاعدة الأساسية". أزال Chrome هذه الأحداث في الإصدار 126، وهدفنا هو إزالتها من جميع المتصفّحات.

لفهم السجلّ وسبب إزالة هذه الأحداث، يُرجى الاطّلاع على مقالة سيتمّ إيقاف أحداث Mutation نهائيًا في Chrome.

مزيد من المعلومات

يمكن العثور على أوصاف القائمة الكاملة للميزات في README الخاص بالمشروع. يمكنك أيضًا الاطّلاع على المشاركات من الشركات الأخرى التي تعمل على Interop 2025.