الميزات الجديدة في Chrome 111

Adriana Jara

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

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

عرض Transitions API.

إنّ إنشاء انتقالات سلسة على الويب مهمة معقّدة. تم تصميم واجهة برمجة التطبيقات View Transitions API لتسهيل عملية إنشاء انتقالات مصقولة عن طريق التقاط طرق عرض والسماح في DOM بالتغيير بدون أي تداخل بين الحالات.

الانتقالات التي تم إنشاؤها باستخدام View Transition API تجربة الموقع التجريبي: يتطلب استخدام الإصدار 111 من Chrome أو الإصدارات الأحدث.

انتقال العرض التلقائي هو انتقال مموّه، وينفّذ المقتطف التالي هذه التجربة.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

عند استدعاء .startViewTransition()، تسجِّل واجهة برمجة التطبيقات الحالة الحالية للصفحة.

بعد اكتمال ذلك، يتم استدعاء callback الذي تم تمريره إلى .startViewTransition(). وهذا هو المكان الذي يتم فيه تغيير DOM. بعد ذلك، تسجِّل واجهة برمجة التطبيقات الحالة الجديدة للصفحة.

يُرجى العلم أنّه تم إطلاق واجهة برمجة التطبيقات لتطبيقات الصفحة الواحدة (SPA)، ولكن يتم أيضًا تنفيذ واجهة برمجة التطبيقات لنماذج أخرى.

هناك العديد من التفاصيل حول واجهة برمجة التطبيقات هذه، ويمكنك الاطّلاع على مزيد من المعلومات في مقالتنا التي تتضمّن عيّنات وتفاصيل، أو استكشاف مستندات View Transitions على MDN.

‫CSS Color Level 4

من خلال مستوى الألوان 4 في CSS، تتيح CSS الآن شاشات عالية الدقة، مع تحديد الألوان من نطاقات الألوان العالية الدقة، كما تقدّم مساحات ألوان ذات تخصصات.

بعبارة أخرى، يعني ذلك توفُّر ألوان إضافية بنسبة% 50 للاختيار من بينها. بدا لك أنّ 16 مليون لونًا هو عدد كبير. هكذا توقعتُ أيضًا.

يتم عرض سلسلة من الصور تنتقل بين مجموعات ألوان واسعة وضيقة، توضّح مدى سطوع الألوان وتأثيراته.
تجربة الميزة بنفسك

يشمل التنفيذ الدالة color()، ويمكن استخدامها لأي مساحة لون تحدد الألوان باستخدام قنوات R وG وB. يأخذ color() مَعلمة مساحة ألوان أولاً، ثم سلسلة من قيم القنوات للنموذج اللوني أحمر أخضر أزرق (RGB) وبعض قيم ألفا اختياريًا.

فيما يلي بعض الأمثلة على استخدام دالة الألوان بمساحات ألوان مختلفة.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

اطّلِع على هذه المقالة للحصول على مزيد من المستندات للاستفادة إلى أقصى حد من الألوان العالية الدقة باستخدام CSS.

أدوات مطوّري البرامج للألوان الجديدة

تتضمّن أدوات المطوّرين ميزات جديدة تتيح استخدام مواصفات مستوى 4 من ألوان css.

تتيح الآن لوحة الأنماط استخدام 12 مساحة ألوان جديدة و7 نطاقات ألوان جديدة موضّحة في المواصفات. في ما يلي أمثلة على تعريفات ألوان CSS باستخدام color() وlch() وoklab() وcolor-mix().

أمثلة على تعريفات ألوان CSS

عند استخدام color-mix()، الذي يتيح مزج نسبة مئوية من لون معيّن مع لون آخر، يمكنك عرض النتيجة النهائية للّون في لوحة محسوب. نتيجة مزج الألوان في اللوحة المحسوبة

يتيح أداة اختيار الألوان أيضًا جميع مساحات الألوان الجديدة مع مزيد من الميزات. على سبيل المثال، انقر على نموذج ألوان color(display-p3 1 0 1). تمت أيضًا إضافة خط حدود للّوحة، ما يميز بين نطاقَي sRGB وdisplay-p3 لفهم نطاق اللون المحدّد بشكل أوضح. خط حدودي للنطاق اللوني

يدعم منتقي الألوان أيضًا تحويل الألوان بين تنسيقات الألوان.

تحويل الألوان بين تنسيقات الألوان.

يمكنك الاطّلاع على هذه المشاركة للحصول على مزيد من المعلومات حول تصحيح أخطاء الألوان والميزات الجديدة الأخرى في أدوات المطوّرين.

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

مراجع إضافية

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

اشتراك

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

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