في ما يلي ما تحتاج إلى معرفته:
- يمكنك إضافة لمسة فريدة إلى النص باستخدام الصورة المتحركة
font-palette
وتعديلات CSS الأخرى. - تم إدخال تحسينات على واجهة برمجة تطبيقات قواعد التوقُّع.
- يمكنك تجربة Element Capture API في مرحلة التجربة والتقييم.
- وهناك المزيد.
اسمي أدريانا جارا. لنتعرّف على الميزات الجديدة في الإصدار 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.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/1.png?authuser=6&hl=ar)
تجدر الإشارة إلى أنّه يمكنك استخدام ميزة التقاط صور للمنطقة، ولكن في هذه الحالة، إذا كان محتوى معيّن، مثل القائمة المنسدلة، يظهر فوق المحتوى المحدّد، ستكون هذه القائمة المنسدلة جزءًا من التسجيل.
![تم التقاط لقطة شاشة لقائمة منسدلة.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/3.png?authuser=6&hl=ar)
تحل واجهة برمجة تطبيقات Element Capture هذه المشكلة، عن طريق السماح لك باستهداف العنصر الذي تريد مشاركته.
![لقطة شاشة للعنصر المستهدَف بدون قائمة منسدلة](https://developer.chrome.com/static/docs/web-platform/element-capture/image/4.png?authuser=6&hl=ar)
يُرجى الاطّلاع على القسم التقاط فيديو مضمَّن من أي عنصر للحصول على عيّنات من الرموز البرمجية والتسجيل في مرحلة التجربة والتقييم في ElementCapture.
وغير ذلك
بالطبع هناك الكثير.
إنّ الطريقتين
resizeBy()
وresizeTo()
اللتين تشكّلان جزء من Document Picture-in-Picture API تتطلّبان إيماءة المستخدم.يمكنك فتح أداة اختيار الخيارات لعنصر
<select>
آليًا باستخدام طريقةshowPicker()
فيHTMLSelectElement
.scope_extensions
في تجربة تحديد المصدر، ويسمح بتوسيع سلوكيات تطبيق الويب ليشمل مصادر أخرى، في حال كان هناك اتفاق بين المصدر الأساسي لتطبيق الويب والمصادر المرتبطة به.
محتوى إضافي للقراءة
يتناول هذا فقط بعض النقاط الرئيسية. يُرجى التحقق من الروابط التالية التغييرات الإضافية في Chrome 121.
- الميزات الجديدة في "أدوات مطوري البرامج في Chrome" (121)
- إيقاف Chrome 121 نهائيًا وعمليات إزالته
- تحديثات ChromeStatus.com للإصدار 121 من Chrome
- قائمة تغيير مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة مطوّري برامج Chrome على YouTube، وستتلقى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
مرحبًا أدريانا جارا، وفور طرح Chrome 122، سأكون على أتمّ استعداد لإخبارك بالميزات الجديدة في Chrome.