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

Rachel Andrew

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

نقطة الانطلاق

في بداية العام حصل Chrome على نتيجة توافق تجريبي مع المتصفِّح تساوي 83.

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

نافذة منبثقة

أصبحت أداة Popover جزءًا من حزمة 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 في Baseline. نتائج عديدة تشهد التطبيقات بالفعل فوائد Popover. تمكّنت Tokopedia من تقليل كمية رموز React بشكلٍ كبير من خلال الاستفادة من الميزة، واستخدام polyfill للمتصفّحات غير المتوافقة.

خصائص مخصّصة متقدمة مع @property

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

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

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

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

السمة font-size-adjust

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

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

التفاف النص: الرصيد

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

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

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