جديد على منصة الويب في أكتوبر

تعرَّف على بعض الميزات المثيرة للاهتمام التي أصبحت متوفّرة في متصفّحات الويب الثابتة والتجريبية خلال تشرين الأول (أكتوبر) 2022.

Rachel Andrew

إصدارات المتصفّح المستقرة

في تشرين الأول (أكتوبر)، أصبح Firefox 106 وChrome 107 وSafari 16.1 ثابتًا. لنلقِ نظرة على ما يعنيه ذلك بالنسبة إلى منصّة الويب.

صورة متحركة لمسارات من الشبكة

بفضل عمل المساهمين في Microsoft، تمكّن Chrome الآن من إضافة قيمتَي grid-template-columns وgrid-template-rows. هذا يعني أن تخطيطات الشبكة يمكن أن تنتقل بسلاسة بين الحالات، بدلاً من الانطباق في نقطة منتصف الرسوم المتحركة أو الانتقال.

مرِّر مؤشر الماوس فوق الصور الرمزية لعرض الصورة المتحركة. هذا المثال مأخوذ من المقالة تخطيطات الشبكة المتحركة في CSS، حيث يمكنك معرفة المزيد من المعلومات.

التوافق مع المتصفح

• 107
• 107
• 66
• 16

الإضافات إلى getDisplayMedia()

تتوفّر في Chrome أيضًا بعض الإضافات إلى getDisplayMedia() التي تهدف إلى منع المشاركة الزائدة عن طريق الخطأ عند مشاركة الشاشة.

• يمكن أن يُشير الخيار displaySurface إلى أنّ تطبيق الويب يفضّل تقديم نوع عرض معيّن (علامات التبويب أو النوافذ أو الشاشات).
• يشير الخيار surfaceSwitching إلى ما إذا كان يجب على Chrome السماح للمستخدم بالتبديل بين علامات التبويب المشترَكة بشكل ديناميكي.
• يمكن استخدام الخيار selfBrowserSurface لمنع المستخدم من مشاركة علامة التبويب الحالية. هذا يتجنب تأثير "قاعة المرايا".
• يضمن الخيار systemAudio أنّ Chrome لا يوفّر سوى تسجيلاً صوتيًا ذا صلة للمستخدم.

يشمل Safari 16.1 أيضًا استخدام getDisplayMedia، بالإضافة إلى إمكانية التقاط نافذة Safari معيّنة.

اختبار التوافق مع تقنية الخطوط والميزات من CSS

أضاف متصفّح Firefox الدالتين font-tech() وfont-format() لتمييز طلبات البحث باستخدام @supports. تختبِر الأمثلة التالية إمكانية استخدام خطوط COLRv1.

@supports font-tech(color-COLRv1) {

}

يمكنك العثور على المزيد من الأمثلة على MDN.

الانتقال إلى جزء النص

يتضمّن الإصدار 16.1 من Safari دعمًا للانتقال إلى جزء النص، ما يوفّر إمكانية الانتقال إلى عنوان URL يتضمّن جزء نص معيّنًا تم تحديده.

التوافق مع AVIF

أمّا متصفّح Safari 16، فيتضمّن صورًا ثابتة بتنسيق AVIF، كما يتوافق متصفّح Safari 16.1 مع صور AVIF المتحركة على أجهزة macOS Ventura وiOS 16 وiPadOS 16.

Web Push for Safari

يتيح متصفّح Safari 16.1 إمكانية استخدام Web Push في متصفّح Safari على نظام التشغيل macOS Ventura. يستخدم هذا واجهة برمجة التطبيقات Push API وNotifications API، ويمكنك قراءة المزيد عن ذلك في مقالة Meet Web Push. ويعني ظهور Web Push في متصفّح Safari أنّه متوفّر الآن على جميع المحرّكات الثلاثة الرئيسية.

إصدارات المتصفّح التجريبي

وتتيح لك الإصدارات التجريبية من المتصفّح إمكانية معاينة الميزات التي ستكون في الإصدار الثابت التالي من المتصفّح. الوقت مناسب لاختبار الميزات الجديدة أو عمليات الإزالة التي قد تؤثّر على موقعك الإلكتروني قبل طرح هذا الإصدار عالميًا. ومن الإصدارات التجريبية الجديدة هذا الشهر Chrome 108 وFirefox 107 وSafari 16.2.

يتضمّن Chrome 108 القيمة avoid لخصائص تجزئة CSS break-before وbreak-after وbreak-inside عند الطباعة. تطلب هذه القيمة من المتصفِّح تجنُّب حدوث عطل قبل العنصر الذي يتم تطبيقه عليه أو بعده أو داخله. على سبيل المثال، تتجنّب خدمة مقارنة الأسعار التالية (CSS) كسر الشكل عند فاصل صفحة.

figure {
    break-inside: avoid;
}

بدأ Chrome 108 في طرح تغيير على طريقة عمل التجاوز على العناصر التي تم استبدالها، ما قد يؤدي إلى تغييرات مرئية في بعض الظروف. يمكنك الاطّلاع على مقالة تغيير تجاوز العناصر التي تم استبدالها في CSS للحصول على المزيد من التفاصيل والتعرّف على كيفية حلّ أي مشاكل تظهر لك.

هناك تغيير في طريقة عمل "إطار عرض التنسيق" في Chrome على نظام التشغيل Android عند إظهار لوحة المفاتيح على الشاشة. اطّلِع على مقالة الاستعداد للتغييرات التي تطرأ على سلوك تغيير حجم إطار العرض في Chrome على أجهزة Android لمعرفة مزيد من المعلومات والتعرّف على كيفية الاستعداد لتغيير حجم خدمة الشحن هذه الشهر المقبل.

وتتوفّر أيضًا في Chrome وحدات إطار عرض CSS الجديدة. ويشمل ذلك الوحدات الصغيرة (svw وsvh وsvi وsvb وsvmin وsvmax) والوحدات الكبيرة (lvw وlvh وlvi وlvb وlvmin وlvmax) والوحدات الديناميكية (dvw وdvh وdvi وdvb وdvmin وdvmax) والوحدات المنطقية (vi وvb). يتم تنفيذ هذه الوحدات بالفعل في Firefox وSafari.

يتيح الإصدار 107 من Firefox دعم خطوط COLRv1، وذلك لضمّ Chrome في دعم تقنية الخطوط هذه. في الخطوط أيضًا، يضيف Chrome 108 الدعم للدالتَين font-tech() وfont-format() لإبراز طلبات البحث باستخدام @supports.

يضيف أيضًا متصفّح Firefox دعمًا لـ contain-intrinsic-size من خلال الانضمام إلى Chrome لإنشاء متصفّحَين متوافقَين مع هذه الميزة.

يتضمن الإصدار التجريبي 16.2 من Safari مجموعة من إصلاحات CSS، بما في ذلك تغيير الحجم واقتصاص التمرير.

جزء من سلسلة "الجديد على الويب"