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

طلبات بحث توافق مجموعة الألوان

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

التحقّق من خدمة مقارنة الأسعار (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 و العرض-p3. توضيح النطاق اللوني المحدد داخله.

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

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

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

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

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

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

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

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