مع بدء النصف الثاني من العام، نريد أن نلقي نظرة على كيفية تحسين Interop 2024 لإمكانية التشغيل التفاعلي على الويب هذا العام.
نقطة البداية
في بداية العام، كانت النتيجة التي حصل عليها Chrome في اختبار التوافق التجريبي للمتصفّح هي 83.
واليوم، تبلغ هذه النتيجة 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>
يمكنك الاطّلاع على مزيد من المعلومات في مقالة إطلاق واجهة برمجة التطبيقات Popover API في الإصدار الأساسي. تحقّق العديد من التطبيقات مزايا استخدام Popover. تمكّنت شركة Tokopedia من تقليل مقدار رمز React البرمجي بشكل كبير من خلال الاستفادة من الميزة، وذلك باستخدام polyfill للمتصفّحات غير المتوافقة.
السمات المخصّصة المتقدّمة باستخدام @property
تتيح لك قاعدة CSS @property
إنشاء خصائص مخصّصة متقدّمة، مع تفاصيل
أكثر بكثير من الاسم والقيمة المتاحَين في الخصائص المخصّصة العادية.
اضبط البنية المسموح بها لتحديد نوع البيانات التي تحتوي عليها هذه السمة، مثل
اللون أو الرقم أو الطول. بعد ذلك، حدِّد ما إذا كان الحقل
يرث قيمة معيّنة، وحدِّد قيمة أولية.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
تعمل قاعدة @property
حاليًا على تحسين النتيجة التجريبية لمتصفّح Firefox،
ما يؤدي إلى زيادة النتيجة الثابتة عند طرح الإصدار 128 من Firefox في وقت لاحق من هذا الشهر. وينضمّ أيضًا إلى
البيانات الأساسية المتوفّرة حديثًا.
اطّلِع على مزيد من المعلومات في مقالة @property: منح قدرات خارقة لمتغيّرات CSS.
سمة font-size-adjust
تتيح لك سمة CSS font-size-adjust
تعديل حجم الحروف
الصغيرة مقارنةً بحجم الحروف الكبيرة. يكون ذلك مفيدًا في الحالات التي قد يؤدي فيها الخط الاحتياطي إلى ظهور الخط الأساسي، لأنّ ذلك يساعد في ضمان سهولة قراءة الخط الاحتياطي، خاصةً عند استخدام أحجام الخطوط الصغيرة.
يتم حاليًا تضمين الموقع الإلكتروني font-size-adjust
في النتيجة التجريبية
لمتصفح Chrome، ولكنّه سيزيد من النتيجة الثابتة عند طرحه مع Chrome 127 هذا الشهر. وينضمّ أيضًا إلى "البيانات الأساسية المتوفّرة حديثًا".
text-wrap: balance
يؤدي استخدام text-wrap: balance
إلى توجيه المتصفّح إلى تحديد أفضل ميزة لالتفاف السطر بشكل متوازن للنص. ويُعدّ ذلك مفيدًا بشكل خاص للعناوين، حيث يمنع مثلاً
التفاف العنوان إلى كلمة واحدة في السطر الثاني.
أصبح هذا الإجراء متوافقًا مؤخرًا مع Safari، وتعمل المتصفّحات الأخرى على حلّ المشاكل في الاختبارات لضمان عمل هذه الميزة بشكل جيد في جميع المتصفّحات.
بالإضافة إلى أنّ هذه الميزات الرئيسية أصبحت قابلة للتشغيل التفاعلي، تم إجراء العديد من التحسينات الأخرى. يشير كل اختبار يجتازه التطبيق إلى مشكلة في التشغيل التفاعلي لن تواجهها. ونتطلّع إلى معرفة مدى قربنا من تحقيق نتيجة% 100 بحلول نهاية العام.