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

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

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

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

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

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

  • Chrome: 107
  • Edge: 107.
  • Firefox: 66
  • ‫Safari: 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.

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

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

إتاحة استخدام تنسيق AVIF

يتيح الإصدار 16 من Safari عرض صور AVIF الثابتة، بينما يتيح الإصدار 16.1 من Safari عرض صور AVIF المتحركة على نظام التشغيل macOS Ventura وiOS 16 وiPadOS 16.

الإشعارات التلقائية على الويب لمتصفّح Safari

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

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

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

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

figure {
    break-inside: avoid;
}

يبدأ الإصدار 108 من Chrome في طرح تغيير على طريقة تصرف العرض الفائض للعناصر التي تم استبدالها، ما قد يؤدي إلى تغييرات مرئية في بعض الحالات. يُرجى الاطّلاع على مقالة تغيير في العرض الفائض للعناصر التي تم استبدالها في 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. في الخطوط أيضًا، يضيف الإصدار 108 من Chrome دالّتَي font-tech() وfont-format() لعرض طلبات البحث التي تحتوي على @supports.

يتيح Firefox أيضًا استخدام contain-intrinsic-size، ما يجعله يتضمّن ميزة تتوفّر أيضًا في Chrome.

يتضمّن الإصدار التجريبي من Safari 16.2 مجموعة من إصلاحات CSS، بما في ذلك ضبط الحجم وميزة "التمرير السريع".

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