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

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

  • يمكنك إنشاء عمليات انتقال مصقولة في تطبيقك المكوّن من صفحة واحدة باستخدام واجهة برمجة التطبيقات View Transitions API.
  • يمكنك الارتقاء بألوان موقعك الإلكتروني إلى المستوى التالي من خلال إتاحة المستوى 4 من ألوان CSS.
  • استكشِف الأدوات الجديدة في لوحة الأنماط للاستفادة إلى أقصى حد من وظائف الألوان الجديدة.
  • وهناك الكثير من الميزات الأخرى.

اسمي أدريانا جارا. لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 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) وبعض قيم ألفا اختياريًا.

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

.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، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

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