نقل البيانات إلى لون CSS عالي الدقة

هذا المستند هو جزء من دليل ألوان CSS عالي الدقة.

هناك استراتيجيتان رئيسيتان لتحديث لون مشروع الويب لدعم الشاشات الكبيرة النطاقة:

1. التقليص السلس: يمكنك استخدام مساحات الألوان الجديدة والسماح للمتصفح ونظام التشغيل بتحديد اللون الذي سيتم عرضه استنادًا إلى إمكانيات العرض.

2. التحسين التدريجي: استخدِم @supports و@media لتقييم إمكانات متصفّح المستخدم، وإذا تم استيفاء الشروط، قدِّم ألوانًا واسعة النطاق.

إذا لم يفهم المتصفّح لون display-p3:

color: red;
color: color(display-p3 1 0 0);

في حال كان المتصفّح لا يتعرّف على اللون display-p3:

color: red;
color: color(display-p3 1 0 0);

وهناك مزايا وعيوب لكل طريقة. فيما يلي قائمة سريعة بالإيجابيات والسلبيات:

التقليص السلس

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

التحسين التدريجي

• الإيجابيات
  • المزيد من التحكّم من خلال دقة الألوان المُدارة
  • استراتيجية مضافة لا تؤثر على الألوان الحالية.
• السلبيات
  • تحتاج إلى إدارة بناءتي جملة لونية منفصلتين.
  • تحتاج إلى إدارة سلسلتَي ألوان منفصلتين.

التأكّد من توفير السلسلة اللونية ومساحة الألوان

يتيح المتصفح التحقق من التوافق مع إمكانات السلسلة الواسعة النطاق واعتماد بنية الألوان من CSS وJavaScript. لا يتوفر سلسلة الألوان الدقيقة التي لدى المستخدم، ويتم توفير إجابة معممة حتى يتم الحفاظ على خصوصية المستخدم. مع ذلك، يتوفر دعم مساحة اللون الدقيق، لأنّه لا يعتمد على إمكانات أجهزة المستخدم مثل gamut.

طلبات البحث عن دعم سلسلة الألوان

تتحقق أمثلة التعليمات البرمجية التالية من نطاق ألوان المستخدم الزائر في العرض.

التحقّق من خدمة مقارنة الأسعار (CSS)

إنّ الاستفسار الأقل تحديدًا عن فريق الدعم هو الاستعلام عن الوسائط dynamic-range:

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

يمكن الاستعلام عن الدعم التقريبي أو أكثر باستخدام طلب الوسائط color-gamut:

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

هناك طلبان إضافيان عن الوسائط للتحقّق من الدعم:

1. @media (color)
2. @media (color-index)

التحقّق من JavaScript

بالنسبة إلى JavaScript، يمكن استدعاء دالة window.matchMedia() وتمرير استعلام عن الوسائط للتقييم.

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

يمكن نسخ النمط أعلاه لبقية الاستعلامات عن الوسائط.

طلبات البحث عن دعم مساحة الألوان

تتحقق أمثلة التعليمات البرمجية التالية من متصفح المستخدم الزائر ومن اختياره لمساحات الألوان للعمل معها.

التحقّق من خدمة مقارنة الأسعار (CSS)

يمكن طلب دعم مساحة اللون الفردية باستخدام طلب بحث @supports:

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

التحقّق من JavaScript

بالنسبة إلى JavaScript، يمكن استدعاء دالة CSS.supports() وتمرير زوج خاص منها وقيمة لمعرفة ما إذا كان المتصفّح يفهمها.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

وضع الأجهزة وتحليل عمليات التحقق معًا

أثناء انتظار تنفيذ كل متصفح لميزات الألوان الجديدة هذه، ننصحك بالتحقق من إمكانات كل من الأجهزة وإمكانية تحليل الألوان. غالبًا ما يكون هذا ما أستخدمه عند تحسين الألوان تدريجيًا إلى دقة عالية:

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

تصحيح أخطاء اللون باستخدام "أدوات مطوري البرامج في Chrome"

تم تحديث "أدوات مطوري البرامج في Chrome" وتزويدنا بأدوات جديدة لمساعدة المطوّرين على إنشاء لون عالي الدقة وتحويله وتصحيح الأخطاء فيه.

تم تعديل علبة الألوان.

أصبحت أداة اختيار الألوان متوافقة الآن مع جميع مساحات الألوان الجديدة. وهو ما يتيح للمؤلفين التفاعل مع قيم القناة تمامًا كما هو الحال.

حدود السلسلة

وتمت أيضًا إضافة خط حدود السلسلة، لرسم خط بين سلسلتَي srgb وdisplay-p3. من خلال توضيح السلسلة اللونية المحددة داخله.

يساعد هذا المؤلفين على التفريق بصريًا بين الألوان عالية الدقة والألوان غير العالية الدقة. وهذه الميزة مفيدة بشكل خاص عند العمل مع دالة color() ومساحات الألوان الجديدة لأنّها قادرة على إنتاج ألوان غير عالية الدقة وألوان عالية الدقة. إذا كنت تريد التحقق من السلسلة اللونية التي توجد فيها، فافتح منتقي الألوان وانظر!

تحويل الألوان

استطاعت "أدوات مطوري البرامج" لسنوات عديدة تحويل الألوان بين التنسيقات المتوافقة مثل hsl وhwb وRGB والسداسي عشري. shift + click على عينة ألوان مربعة في جزء "الأنماط" لإجراء هذه الإحالة الناجحة. لا يقتصر دور أدوات الألوان الجديدة على التنقّل بين الإحالات الناجحة، بل تؤدّي إلى عرض مربّع حوار حيث يمكن للمؤلفين الاطّلاع على الإحالة الناجحة التي يريدونها واختيارها.

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

استكشِف مزيد من المعلومات عن ميزة تصحيح أخطاء CSS في "أدوات مطوري البرامج".

الخطوات التالية

إنّها تأثيرات أكثر حيوية، وأساليب لمعالجة واستكمال نتائج بشكل متسق، وتقديم تجربة أكثر نبضًا بالحياة للمستخدمين بشكل عام.

اقرأ المزيد من موارد الألوان من الدليل.