تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

Rachel Andrew

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

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

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

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

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

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

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

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

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

يتضمّن الإصدار 16.1 من Safari أيضًا ميزة 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.

Web Push for Safari

يتيح الإصدار 16.1 من Safari ميزة Web Push في Safari على نظام التشغيل macOS Ventura. يستخدم هذا واجهة برمجة التطبيقات Push API والإشعارات API. ويمكنك قراءة المزيد من المعلومات عن ذلك في مقالة Meet 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 بما في ذلك تغيير الحجم والتمرير.

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