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

Adriana Jara

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

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

عرض واجهة برمجة تطبيقات النقل

إنّ إنشاء انتقالات سلسة على الويب مهمّة معقّدة. تتوفّر واجهة برمجة التطبيقات 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). وبعد ذلك، تسجّل واجهة برمجة التطبيقات الحالة الجديدة للصفحة.

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

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

المستوى 4 من لون CSS.

باستخدام المستوى 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()، التي تتيح مزج نسبة مئوية من لون واحد في لون آخر، يمكنك عرض ناتج اللون النهائي في اللوحة المحسوبة ينتج مزيج الألوان في الجزء المحسوب.

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

تتيح "أداة اختيار الألوان" أيضًا تحويل الألوان بين تنسيقات الألوان.

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

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

ومقاييس أخرى

بالطبع هناك المزيد.

  • أضافت خدمة CSS دوال مثلثية ووحدات خطية جذرية إضافية، كما وسعت أداة الاختيار الزائف للعنصر الثانوي.
  • لا تزال واجهة Document Picture in Picture API في مرحلة التجربة والتقييم.
  • أصبح الإجراءان previousslide وnextslide الآن جزءًا من Media Session API. يمكنك الاطّلاع على العرض التوضيحي هنا.

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

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

اشتراك

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

اسمي "أدريانا جارا"، وبمجرد إطلاق Chrome 112، سأكون هنا لإخبارك بالجديد في Chrome!