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

Adriana Jara

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

اسمي أدريانا جارا. لنتعرّف على الميزات الجديدة في الإصدار 121 من Chrome.

تحديثات خدمة مقارنة الأسعار (CSS).

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

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

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

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

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

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

تعديلات واجهة برمجة التطبيقات لقواعد التوقُّع

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

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

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

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

يسمح التغيير المنفصل بتحديد قواعد التوقُّع باستخدام عنوان الاستجابة Speculation-Rules HTTP. يُعد العنوان بديلاً عن استخدام عناصر <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 مفيدة هو تطبيق اجتماعات الفيديو الذي يتيح لك تضمين تطبيقات تابعة لجهات خارجية في iframe. في هذا السيناريو، قد ترغب في التقاط إطار iframe هذا كفيديو ونقله إلى المشاركين عن بُعد.

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

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

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

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

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

يُرجى الاطّلاع على القسم التقاط فيديو مضمَّن من أي عنصر للحصول على عيّنات من الرموز البرمجية والتسجيل في مرحلة التجربة والتقييم في ElementCapture.

وغير ذلك

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

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

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

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

محتوى إضافي للقراءة

يتناول هذا فقط بعض النقاط الرئيسية. يُرجى التحقق من الروابط التالية التغييرات الإضافية في Chrome 121.

اشتراك

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

مرحبًا أدريانا جارا، وفور طرح Chrome 122، سأكون على أتمّ استعداد لإخبارك بالميزات الجديدة في Chrome.