این سند بخشی از راهنمای رنگ CSS با کیفیت بالا است.
دو استراتژی اصلی برای به روز رسانی رنگ پروژه وب برای پشتیبانی از نمایشگرهای گسترده وجود دارد:
تخریب برازنده : از فضاهای رنگی جدید استفاده کنید و به مرورگر و سیستم عامل اجازه دهید تا بر اساس قابلیتهای نمایشگر رنگی را نشان دهد.
بهبود پیشرونده : از
@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 و جاوا اسکریپت را فراهم میکند. طیف دقیق رنگ هایی که کاربر دارد در دسترس نیست، یک پاسخ کلی ارائه شده است تا حریم خصوصی کاربر حفظ شود. با این حال، پشتیبانی از فضای رنگ دقیق در دسترس است، زیرا به قابلیتهای سختافزار کاربر مانند گستره خاص نیست.
نمونههای کد زیر محدوده رنگهای کاربر بازدیدکننده را در نمایشگرشان بررسی میکنند.
کمترین درخواست پشتیبانی خاص، پرس و جو رسانه 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 */
}
دو پرسش رسانه دیگر برای بررسی پشتیبانی وجود دارد:
برای جاوا اسکریپت، تابع 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
الگوی بالا را می توان برای بقیه درخواست های رسانه کپی کرد.
نمونههای کد زیر مرورگر کاربر بازدیدکننده و انتخاب فضاهای رنگی برای کار با آن را بررسی میکنند.
پشتیبانی از فضای رنگی فردی را می توان با استفاده از پرس و جوی @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 به روز شده و مجهز به ابزارهای جدیدی است که به توسعه دهندگان کمک می کند تا رنگ HD را ایجاد، تبدیل و اشکال زدایی کنند.
اکنون انتخابگر رنگ از تمام فضاهای رنگی جدید پشتیبانی می کند. اجازه دادن به نویسندگان برای تعامل با مقادیر کانال درست همانطور که میکنند.
یک خط مرزی گاموت نیز اضافه شده است که خطی بین وسعت srgb و display-p3 ترسیم می کند. روشن می کند که رنگ انتخاب شده در کدام محدوده قرار دارد.
این به نویسندگان کمک می کند تا به صورت بصری بین رنگ های HD و رنگ های غیر HD تمایز قائل شوند. این به ویژه هنگام کار با تابع color()
و فضاهای رنگی جدید بسیار مفید است زیرا آنها قادر به تولید رنگ های غیر HD و HD هستند. اگر می خواهید بررسی کنید رنگ شما در کدام طیف قرار دارد، انتخابگر رنگ را بالا بیاورید و ببینید!
DevTools چندین سال است که قادر به تبدیل رنگ ها بین فرمت های پشتیبانی شده مانند hsl، hwb، rgb و hex بوده است. shift + click
بر روی یک نمونه رنگ مربعی در صفحه Styles برای انجام این تبدیل. ابزارهای رنگی جدید فقط از طریق تبدیلها چرخه نمیشوند، بلکه یک گفتگو ایجاد میکنند که در آن نویسندگان میتوانند تبدیل مورد نظر خود را ببینند و انتخاب کنند.
هنگام تبدیل، مهم است که بدانید آیا تبدیل به تناسب فضا بریده شده است یا خیر. DevTools اکنون یک نماد هشدار برای رنگ تبدیل شده دارد که به شما در مورد این بریده هشدار می دهد.
ویژگی های بیشتر اشکال زدایی CSS را در DevTools کشف کنید.
جنب و جوش بیشتر، دستکاری ها و درون یابی های مداوم و به طور کلی تجربه رنگارنگ تری را به کاربران ارائه می دهد.
منابع رنگ بیشتر را از راهنما بخوانید.