سنة أخرى من تحسينات منصة الويب | بلوق | web.dev

تم النشر: 13 فبراير 2025

بعد النجاح الهائل في Interop 2024 ، يعود المشروع اليوم بمجموعة جديدة من مجالات التركيز لعام 2025. على الرغم من أننا لم نتمكن .

مجالات التركيز لعام 2025

• تحديد المواقع
• backdrop-filter
• Core Web Hitals
• <details> عنصر
• تَخطِيط
• الوحدات النمطية
• واجهة برمجة تطبيقات الملاحة
• أحداث المؤشر والماوس
• إزالة أحداث الطفرة
• @scope
• scrollend حدث
• API الوصول إلى التخزين
• text-decoration
• URLPattern
• عرض واجهة برمجة تطبيقات الانتقال
• webassembly
• Compat على الويب
• Webrtc
• أوضاع الكتابة

بالإضافة إلى ذلك ، وكما هو الحال في السنوات السابقة ، هناك مجموعة من مجالات التحقيق. هذه هي المجالات التي ليس لدينا فيها معلومات أو اختبارات كافية لتضمينها كمنطقة تركيز ، لكن المجموعة تشعر أن بعض العمل يجب أن يتم نقلها إلى مرحلة يمكننا من خلالها تضمينها.

• اختبار إمكانية الوصول
• اختبار API Gamepad
• اختبار الهاتف المحمول
• اختبار الخصوصية
• webvtt

نحن متحمسون لكل هذه الميزات والتحسينات التي سيحضرها مشروع هذا العام إلى المنصة. وكما هو الحال مع العام الماضي ، سيجعل المشروع مجموعة كاملة من الأشياء الأساسية المتاحة حديثًا. يشارك هذا المنشور المزيد من المعلومات حول بعض الميزات الموجودة في القائمة ، مع روابط للمعلومات لمعرفة المزيد.

يمكنك متابعة لوحة معلومات Interop 2025 على wpt.fyi/Interop-2025 ، وبينما تصبح الأمور أساسية متوفرة حديثًا ، ستظهر في قائمة الأساس 2025 على WebStatus.dev أيضًا.

CSS و UI

العديد من الميزات المضمنة في Interop 2025 هي ميزات قمت بالإبلاغ عنها على أنها مهمة في مسح ولاية 2024. سوف يساعدونك في إنشاء تجارب مستخدم أكثر جمالا وأداء.

تحديد المواقع

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

إن جعل هذه الميزة جزءًا من خط الأساس سيجعل من الأسهل إنشاء واجهات المستخدم ، دون الحاجة إلى الاعتماد على مكتبات الطرف الثالث. تعرف على المزيد في وثائق تحديد موقع المرساة ، وكذلك على تحديد المواقع المرساة 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.

CSS @scope القاعدة

ال @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
في القاعدة وفي @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
يتم تضمينها. هذه تجعل من الممكن التحكم في ما يحدث عندما يفيض المحتوى مربعات ، بغض النظر عن وضع الكتابة.

Core Web Hitals

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

يشتمل Interop 2025 على أكبر طلاء محتوى (LCP) والتفاعل مع مقاييس الطلاء التالي (INP) من خلال تنفيذ أكبر واجهة برمجة تطبيقات API وأجهزة توقيت الأحداث عبر المتصفحات. مقياس التحول التراكمي للتخطيط (CLS) ليس في نطاق.

LCP API

API توقيت الأحداث (لـ INP)

Webassembly (WASM)

يتيح لك واجهة برمجة تطبيقات Webassembly تحميل رمز Webassembly ، وهو تنسيق تعليمي ثنائي محمول. يمكن أن يسمح لك بالقيام بأشياء مثل تشغيل تطبيق مدونة بأكمله ، بما في ذلك جميع متطلبات الخادم ، في المتصفح!

هذا العام ، سيركز العمل على الميزات التالية:

• سلسلة JavaScript المدمجة: لجعل وظائف سلسلة Webassembly المدمجة تضعف مجموعة فرعية من واجهة برمجة تطبيقات سلسلة JavaScript بحيث يمكن الاتصال بها بدون رمز الغراء JavaScript.
• تكامل المخازن المؤقتة القابلة للإصلاح: لدمج Webassembly في رمز JavaScript الذي يستخدم المخازن المؤقتة القابلة للتشكيل.

ميزة إزالة

يتضمن المشروع هذا العام إزالة من المنصة. يتم إهمال أحداث الطفرة واستبدالها بأكثر من ذلك بكثير من الأداء والخط الأساسي المتاح على نطاق واسع API. قام Chrome بإزالة هذه الأحداث في Chrome 126 ، وهي منطقة التركيز هذه هي إزالتها من جميع المتصفحات.

لفهم التاريخ ، ولماذا تتم إزالة هذه الأحداث ، ستتم إزالة أحداث الطفرة من Chrome.

يتعلم أكثر

يمكن العثور على أوصاف القائمة الكاملة للميزات في مشروع ReadMe. أيضا ، اقرأ المنشورات من الشركات الأخرى التي تعمل على interop 2025.