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

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

Adam Argyle

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

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

طلبات البحث حول مدى توفّر نطاق الألوان

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

التحقّق من خدمة مقارنة الأسعار (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 وhex، لعدة سنوات. shift + click على نموذج ألوان مربّع في Pane Pane (لوحة الأنماط) لتنفيذ هذه التحويلة. لا تؤدي أدوات الألوان الجديدة إلى التبديل بين الإحالات الناجحة فحسب، بل توفّر مربّع حوار يتيح للمؤلفين الاطّلاع على الإحالة الناجحة التي يريدونها واختيارها.

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

تعرَّف على مزيد من المعلومات حول ميزة تصحيح أخطاء CSS في أدوات المطوّرين.

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

مزيد من الحيوية وعمليات الاستكمال والتشغيل بشكل متناسق، وتقديم تجربة غنية بالألوان بشكل عام للمستخدمين.

يمكنك الاطّلاع على المزيد من مراجع الألوان من الدليل.