الميزات الجديدة في الإصدار 121 من Chrome

Adriana Jara

في ما يلي ما تحتاج إلى معرفته:

اسمي "أدريانا جارا". لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 121 من Chrome.

تعديلات CSS

لنبدأ بتحديثات CSS:

أصبحت السمتَان scrollbar-color وscrollbar-width متوفّرتين الآن. باستخدامها، يمكنك تخصيص أشرطة التمرير وتغيير لونها وعرضها.

تتيح لك السمة font-palette اختيار لوحة ألوان معيّنة لعرض خط ألوان. تتيح هذه الخاصية الآن الرسوم المتحركة، لذا يصبح التبديل بين لوحات الألوان انتقالاً سلسًا بين لوحتي الألوان المحددتين.

تتيح لك العناصر الزائفة ::spelling-error و::grammar-error تخصيص ألوان للأخطاء الإملائية والنحوية، وتمييز الكلمات التي تحتوي على أخطاء إملائية بألوان خلفية أو زخارف أخرى، وتنفيذ التدقيق الإملائي المخصّص بمظهر أكثر تكاملاً.

تم تحسين ميزة حجب عناصر CSS في ملفات SVG، وذلك في إطار متابعة ميزة حجب عناصر CSS المحسّنة في الإصدار 120 من Chrome، مع إضافة ميزة حجب عناصر جديدة إلى ملفات SVG (عناصر حجب متعددة، بالإضافة إلى mask-mode وmask-composite وmask-position وmask-repeat). بالإضافة إلى ذلك، أصبحت عناصر حجب SVG عن بُعد (مثل mask: url(masks.svg#star)) متاحة الآن.

تصحيح: ذكر إصدار سابق من هذه المقالة أنّه تمّت إضافة شروط supports() إلى @import، ولكنّ هذا غير صحيح. تم تضمين هذا التغيير في الإصدار 122 من Chrome.

تحديثات Speculation Rules API

يمكن للمواقع الإلكترونية استخدام واجهة برمجة التطبيقات Speculation Rules API لإعلام Chrome آليًا بالصفحات التي يجب عرضها مسبقًا، ما يمنح المستخدمين تجربة أفضل من خلال تقليل وقت التنقّل في الصفحات.

تتضمّن واجهة برمجة التطبيقات الآن قواعد المستندات: وهي عبارة عن إضافة إلى بنية قواعد التكهّن التي تتيح للمتصفّح الحصول على قائمة عناوين URL للتحميل التوقّعي من العناصر في الصفحة. قد تتضمّن قواعد المستندات معايير تحدّد الروابط التي يمكن استخدامها. بالإضافة إلى ذلك، يتيح لك حقل "سرعة العرض" الجديد تحميل الروابط مسبقًا أو عرضها مسبقًا تلقائيًا على الصفحات فورًا أو عند تمرير مؤشر الماوس فوقها أو الضغط على زر الماوس.

في ما يلي مثال على قواعد المستند:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

يسمح تغيير منفصل بتحديد قواعد التكهّن باستخدام عنوان استجابة HTTP Speculation-Rules. يُعدّ العنوان بديلاً لاستخدام عناصر <script> المضمّنة. يجب أن تكون قيمة هذا الرأس عنوان URL يشير إلى مورد نصي من نوع MIME "application/speculationrules+json". ستتم إضافة قواعد المرجع إلى مجموعة قواعد المستند.

بالإضافة إلى ذلك، يسمح التلميح No-Vary-Search بمطابقة عمليات التحميل المُسبَق التوقّعي حتى في حال تغيُّر مَعلمات طلب البحث لعنوان URL. يشير عنوان استجابة HTTP No-Vary-Search إلى أنّه يمكن تجاهل بعض أو كل أجزاء طلب بحث عنوان URL لأغراض المطابقة. ويمكن أن تذكر الشركة أنّ ترتيب مفاتيح مَعلمات طلب البحث يجب ألّا يمنع حالات التطابق، أو أنّ مَعلمات طلب البحث المحدّدة يجب ألا تمنع عمليات المطابقة، أو أنّ مَعلمات طلب بحث معيّنة معروفة فقط من المفترض ألا تتسبب في حالات عدم التطابق.

يمكنك الانتقال إلى التحسينات على واجهة برمجة تطبيقات قواعد التوقُّع لمزيد من المعلومات عن هذه التغييرات.

مرحلة التجربة والتقييم في Element Capture API

تتوفّر واجهة برمجة التطبيقات Element Capture API في مرحلة التجربة والتقييم. تتيح لك واجهة برمجة التطبيقات هذه تسجيل عنصر HTML معيّن. ويحوّل هذا الإجراء عملية تسجيل لعلامة التبويب بأكملها إلى عملية تسجيل لشجرة فرعية معيّنة من نموذج DOM، مع تسجيل العناصر المباشرة فقط للعنصر المستهدَف. بعبارة أخرى، يتم اقتصاص المحتوى الذي يحجب المحتوى المرئي وإزالته.

من الأمثلة على الحالات التي تكون فيها واجهة برمجة التطبيقات Element Capture API مفيدة هو تطبيق اجتماعات الفيديو الذي يتيح لك تضمين تطبيقات تابعة لجهات خارجية في إطار iframe. في هذا السيناريو، قد ترغب في التقاط إطار iframe هذا كفيديو ونقله إلى المشاركين عن بُعد.

لقطة شاشة لمكالمة فيديو في Chrome
يستخدم "إيلاد" تطبيقًا تابعًا لجهة خارجية في مكالمة فيديو مع "فرانسوا".

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

تم التقاط لقطة شاشة لقائمة منسدلة.
تظهر القائمة المنسدلة التي أنشأها "إياد" أعلى المحتوى الذي تلقّاه "فاروق".

تعالج واجهة برمجة التطبيقات Element Capture API هذه المشكلة من خلال السماح لك باستهداف العنصر الذي تريد مشاركته.

لقطة شاشة للعنصر المستهدَف بدون قائمة منسدلة في العرض
لا تظهر لـ "فاروق" القائمة المنسدلة التي أنشأها "إياد".

اطّلِع على مقالة تسجيل بث فيديو من أي عنصر للحصول على نماذج الرموز البرمجية والتسجيل في الفترة التجريبية لإصدار ElementCapture الأصلي.

وغير ذلك

بالطبع هناك الكثير.

  • إنّ الطريقتين resizeBy() وresizeTo() اللتين تشكّلان جزء من Document Picture-in-Picture API تتطلّبان إيماءة المستخدم.

  • يمكنك فتح أداة اختيار الخيارات لعنصر <select> آليًا باستخدام طريقة showPicker() في HTMLSelectElement.

  • ‫scope_extensions، قيد التجربة، يسمح بتوسيع سلوكيات تطبيق الويب لتشمل مصادر أخرى، في حال توفّر اتفاق بين المصدر الأساسي لتطبيق الويب والمصادر المرتبطة به.

مراجع إضافية

يتناول هذا فقط بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على التغييرات الإضافية في الإصدار 121 من Chrome.

اشتراك

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة YouTube الخاصة بمطوّري Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

اسمي "أدريانا جارا"، وسأكون هنا لإطلاعك على الميزات الجديدة في Chrome فور طرح الإصدار 122.