تعديل منتصف العام لعام 2024 بشأن إمكانية التشغيل التفاعلي

مع بدء النصف الثاني من العام، نريد أن نلقي نظرة على كيفية تحسين Interop 2024 لإمكانية التشغيل التفاعلي على الويب هذا العام.

في بداية العام، كانت النتيجة التي حصل عليها Chrome في اختبار التوافق التجريبي للمتصفّح هي 83.

لوحة البيانات التي تتضمّن النتائج: التوافق: 65، التحقيقات: 0، Chrome Canary: 83، Edge Dev: 82، Firefox Nightly: 80، Safari Technology Preview: 79
لوحة بيانات Interop 2024 في شباط (فبراير) 2024
لوحة البيانات التي تتضمّن النتائج: التوافق: 75، التحقيقات: 5، Chrome Canary: 90، Edge Dev: 89، Firefox Nightly: 87، Safari Technology Preview: 88.
لوحة بيانات التوافق لعام 2024 في نهاية حزيران (يونيو) 2024.

واليوم، تبلغ هذه النتيجة 90، مع حصول المتصفّحات الثابتة على نتيجة 85 اعتبارًا من إصدار Chrome 126 في حزيران (يونيو). ارتفعت النتيجة الإجمالية للتشغيل التفاعلي التجريبي بقيمة 10 نقاط، وتشارك هذه المشاركة بعض الميزات التي ساهمت في تحقيق هذه النتيجة.

نافذة منبثقة

أصبحت النافذة المنبثقة جزءًا من Baseline المتوفّرة حديثًا في نيسان (أبريل) 2024. إنّ النوافذ المنبثقة هي مثيرة للاهتمام لأنّ العديد من ميزات واجهة المستخدم التي تحتاج إلى إنشائها، مثل القوائم ونصائح التلميح والعناصر التي تظهر على سطح الشاشة لإجراء اختيارات وواجهات المستخدم التعليمية، هي أنواع من النوافذ المنبثقة. قبل ظهور النافذة المنبثقة، كان إنشاء أيّ من هذه الميزات يتطلّب الكثير من الرموز البرمجية المخصّصة. رمز للتأكّد من عدم فتح عناصر متعدّدة في آنٍ واحد، أو لتفعيل ميزة "إغلاق النافذة من خلال التمرير سريعًا" عندما ينقر المستخدم خارج العنصر قد تكون أيضًا واجهت صعوبة في استخدام z-index للتأكّد من بقاء عنصر واجهة المستخدم أعلى بقية الواجهة.

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

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

يمكنك الاطّلاع على مزيد من المعلومات في مقالة إطلاق واجهة برمجة التطبيقات Popover API في الإصدار الأساسي. تحقّق العديد من التطبيقات مزايا استخدام Popover. تمكّنت شركة Tokopedia من تقليل مقدار رمز React البرمجي بشكل كبير من خلال الاستفادة من الميزة، وذلك باستخدام polyfill للمتصفّحات غير المتوافقة.

السمات المخصّصة المتقدّمة باستخدام @property

تتيح لك قاعدة CSS‏ @property إنشاء خصائص مخصّصة متقدّمة، مع تفاصيل أكثر بكثير من الاسم والقيمة المتاحَين في الخصائص المخصّصة العادية. اضبط البنية المسموح بها لتحديد نوع البيانات التي تحتوي عليها هذه السمة، مثل اللون أو الرقم أو الطول. بعد ذلك، حدِّد ما إذا كان الحقل يرث قيمة معيّنة، وحدِّد قيمة أولية.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

تعمل قاعدة @property حاليًا على تحسين النتيجة التجريبية لمتصفّح Firefox، ما يؤدي إلى زيادة النتيجة الثابتة عند طرح الإصدار 128 من Firefox في وقت لاحق من هذا الشهر. وينضمّ أيضًا إلى البيانات الأساسية المتوفّرة حديثًا.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

اطّلِع على مزيد من المعلومات في مقالة @property: منح قدرات خارقة لمتغيّرات CSS.

سمة font-size-adjust

تتيح لك سمة CSS font-size-adjust تعديل حجم الحروف الصغيرة مقارنةً بحجم الحروف الكبيرة. يكون ذلك مفيدًا في الحالات التي قد يؤدي فيها الخط الاحتياطي إلى ظهور الخط الأساسي، لأنّ ذلك يساعد في ضمان سهولة قراءة الخط الاحتياطي، خاصةً عند استخدام أحجام الخطوط الصغيرة.

يتم حاليًا تضمين الموقع الإلكتروني font-size-adjust في النتيجة التجريبية لمتصفح Chrome، ولكنّه سيزيد من النتيجة الثابتة عند طرحه مع Chrome 127 هذا الشهر. وينضمّ أيضًا إلى "البيانات الأساسية المتوفّرة حديثًا".

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

يؤدي استخدام text-wrap: balance إلى توجيه المتصفّح إلى تحديد أفضل ميزة لالتفاف السطر بشكل متوازن للنص. ويُعدّ ذلك مفيدًا بشكل خاص للعناوين، حيث يمنع مثلاً التفاف العنوان إلى كلمة واحدة في السطر الثاني.

أصبح هذا الإجراء متوافقًا مؤخرًا مع Safari، وتعمل المتصفّحات الأخرى على حلّ المشاكل في الاختبارات لضمان عمل هذه الميزة بشكل جيد في جميع المتصفّحات.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


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