به رنگ HD 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 و جاوا اسکریپت را فراهم می‌کند. طیف دقیق رنگ هایی که کاربر دارد در دسترس نیست، یک پاسخ کلی ارائه شده است تا حریم خصوصی کاربر حفظ شود. با این حال، پشتیبانی از فضای رنگ دقیق در دسترس است، زیرا به قابلیت‌های سخت‌افزار کاربر مانند گستره خاص نیست.

پرس و جوهای پشتیبانی از طیف رنگ

نمونه‌های کد زیر محدوده رنگ‌های کاربر بازدیدکننده را در نمایشگرشان بررسی می‌کنند.

از 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)

از جاوا اسکریپت بررسی کنید

برای جاوا اسکریپت، تابع 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 */
}

از جاوا اسکریپت بررسی کنید

برای جاوا اسکریپت، تابع 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 DevTools

Chrome DevTools به روز شده و مجهز به ابزارهای جدیدی است که به توسعه دهندگان کمک می کند تا رنگ HD را ایجاد، تبدیل و اشکال زدایی کنند.

انتخابگر رنگ به روز شد

اکنون انتخابگر رنگ از تمام فضاهای رنگی جدید پشتیبانی می کند. اجازه دادن به نویسندگان برای تعامل با مقادیر کانال درست همانطور که می‌کنند.

مرزهای محدوده

یک خط مرزی گاموت نیز اضافه شده است که خطی بین وسعت srgb و display-p3 ترسیم می کند. روشن می کند که رنگ انتخاب شده در کدام محدوده قرار دارد.

این به نویسندگان کمک می کند تا به صورت بصری بین رنگ های HD و رنگ های غیر HD تمایز قائل شوند. این به ویژه هنگام کار با تابع color() و فضاهای رنگی جدید بسیار مفید است زیرا آنها قادر به تولید رنگ های غیر HD و HD هستند. اگر می خواهید بررسی کنید رنگ شما در کدام طیف قرار دارد، انتخابگر رنگ را بالا بیاورید و ببینید!

رنگ ها را تبدیل کنید

DevTools چندین سال است که قادر به تبدیل رنگ ها بین فرمت های پشتیبانی شده مانند hsl، hwb، rgb و hex بوده است. shift + click بر روی یک نمونه رنگ مربعی در صفحه Styles برای انجام این تبدیل. ابزارهای رنگی جدید فقط از طریق تبدیل‌ها چرخه نمی‌شوند، بلکه یک گفتگو ایجاد می‌کنند که در آن نویسندگان می‌توانند تبدیل مورد نظر خود را ببینند و انتخاب کنند.

هنگام تبدیل، مهم است که بدانید آیا تبدیل به تناسب فضا بریده شده است یا خیر. DevTools اکنون یک نماد هشدار برای رنگ تبدیل شده دارد که به شما در مورد این بریده هشدار می دهد.

ویژگی های بیشتر اشکال زدایی CSS را در DevTools کشف کنید.

مراحل بعدی

جنب و جوش بیشتر، دستکاری ها و درون یابی های مداوم و به طور کلی تجربه رنگارنگ تری را به کاربران ارائه می دهد.

منابع رنگ بیشتر را از راهنما بخوانید.