وفي ما يلي ما تحتاج إلى معرفته:
- أضِف لمسة فريدة إلى النص باستخدام صورة
font-paletteالمتحركة وتعديلات CSS الأخرى. - هناك تحسينات على واجهة برمجة تطبيقات قواعد التوقُّع.
- يمكنك تجربة Element Compute API في مرحلة التجربة والتقييم.
- وهناك المزيد.
أنا أدريانا جارا لنطّلِع على التفاصيل ونتعرّف على الميزات الجديدة للمطوّرين في الإصدار 121 من Chrome.
تحديثات CSS
لنبدأ بتحديثات CSS:
تتوفّر الآن السمتان scrollbar-color وscrollbar-width. باستخدامها، يمكنك تخصيص أشرطة التمرير وتغيير لونها وعرضها كما خمنت.
تتيح لك السمة font-palette اختيار لوحة ألوان محددة لعرض خط ملوّن. تدعم هذه الخاصية الآن الرسوم المتحركة، لذا فإن التبديل بين لوحات الألوان يصبح انتقالاً سلسًا بين لوحتي الألوان المحددتين.
تتيح لك العناصر الزائفة ::spelling-error و::grammar-error تخصيص ألوان الأخطاء الإملائية والنحوية، وإبراز الكلمات التي بها أخطاء إملائية باستخدام ألوان الخلفية أو غيرها من الزخارف، وتنفيذ تدقيق إملائي مخصّص بمظهر أكثر تكاملاً.
تم تحسين عملية إخفاء صفحات CSS بتنسيق الرسومات الموجّهة التي يمكن تغيير حجمها (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"}}
]}}
]
}
ويسمح التغيير المنفصل بتحديد قواعد التوقُّع باستخدام عنوان استجابة HTTP لقواعد التوقُّع. ويمكن أن يكون العنوان بديلاً لاستخدام عناصر <script> المضمّنة. يجب أن تكون قيمة هذا العنوان عنوان URL يشير إلى مورد نصي من نوع MIME "application/speculationrules+json". ستتم إضافة قواعد المورد إلى مجموعة قواعد المستند.
ويتيح التلميح No-Vary-Search أيضًا إمكانية مطابقة عمليات الجلب المُسبَق المبني على توقُّع حتى في حال تغيير مَعلمات طلب البحث لعناوين URL. يشير عنوان استجابة HTTP No-Vary-Search إلى أنّه يمكن تجاهل بعض أو كل أجزاء طلب بحث عنوان URL لأغراض المطابقة. ويمكن أن يوضِّح ذلك أنّ ترتيب مفاتيح مَعلمات طلب البحث يجب ألا يمنع المطابقات، أو أنّ مَعلمات طلب بحث محدّدة يجب ألا تمنع المطابقات، أو أنّ مَعلمات طلب بحث محدّدة محدّدة فقط يجب أن تتسبب في حالات عدم تطابق.
يُرجى الانتقال إلى التحسينات على واجهة برمجة تطبيقات قواعد التوقُّع للحصول على مزيد من المعلومات عن هذه التغييرات.
مرحلة التجربة والتقييم في Element Compute API
تتوفّر واجهة برمجة التطبيقات Element التدريبي في مرحلة التجربة والتقييم. تتيح لك واجهة برمجة التطبيقات هذه التقاط عنصر HTML محدد وتسجيله. وتحوِّل عملية التقاط علامة التبويب بالكامل إلى التقاط لشجرة فرعية محدَّدة في DOM، مع التقاط العناصر الفرعية المباشرة فقط للعنصر المستهدَف. بمعنى آخر، يعمل على اقتصاص وإزالة كل من المحتوى المسدود والمنقطع.
أحد الأمثلة على المواضع التي تكون فيها واجهة برمجة تطبيقات التقاط العناصر هي تطبيق لمؤتمرات فيديو يتيح لك تضمين تطبيقات تابعة لجهات خارجية في إطار iframe. في هذا السيناريو، قد ترغب في التقاط إطار iframe هذا كفيديو وإرساله إلى المشاركين عن بُعد.
تجدر الإشارة إلى أنّه يمكنك استخدام ميزة التقاط المنطقة لإجراء ذلك، ولكن في هذه الحالة، إذا كان المحتوى، مثل قائمة منسدلة، يقع فوق المحتوى الذي تم اختياره، ستكون تلك القائمة المنسدلة جزءًا من التسجيل.
تحل واجهة برمجة تطبيقات التقاط العناصر هذه المشكلة، حيث تتيح لك استهداف العنصر الذي تريد مشاركته.
يمكنك الدفع بالانتقال إلى تصوير فيديو مضمّن من أي عنصر للحصول على عيّنات من الرموز البرمجية والتسجيل في مرحلة التجربة والتقييم في ElementCapture.
ومقاييس أخرى
بالطبع هناك المزيد.
تتطلب الآن الطريقتان
resizeBy()وresizeTo()، التي تشكّل جزءًا من واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة"، إيماءة المستخدم.يمكنك فتح أداة اختيار الخيارات لعنصر
<select>آليًا باستخدام طريقةshowPicker()فيHTMLSelectElement.scope_extensionsفي تجربة المصدر، يسمح بتوسيع سلوكيات تطبيق الويب ليشمل مصادر أخرى، في حال كان هناك اتفاق بين المصدر الأساسي لتطبيق الويب والمصادر المرتبطة به.
محتوى إضافي للقراءة
يتناول هذا الدليل بعض الميزات الرئيسية فقط. تحقَّق من الروابط التالية للاطّلاع على التغييرات الإضافية في Chrome 121.
- الميزات الجديدة في "أدوات مطوري البرامج في Chrome" (121)
- عمليات إيقاف Chrome 121 نهائيًا وعمليات إزالته
- تحديثات ChromeStatus.com للإصدار 121 من Chrome
- قائمة تغييرات مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للاطّلاع على آخر الأخبار، اشترِك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
مرحبًا أدريانا جارا، وفور إطلاق Chrome 122، سأكون هنا لإخبارك بالجديد في Chrome.