एचडी सीएसएस के रंग पर माइग्रेट करना

यह दस्तावेज़ हाई-डेफ़िनिशन सीएसएस कलर गाइड का हिस्सा है.

वेब प्रोजेक्ट का रंग बदलकर, सहायता करने के लिए दो मुख्य तरीके अपनाए जा सकते हैं वाइड गैमट डिसप्ले:

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 से सिंटैक्स का समर्थन करता है. उपयोगकर्ता के पास मौजूद रंगों का सटीक ब्यौरा उपलब्ध नहीं कराया जाता, सामान्य जवाब दिया जाता है, ताकि उपयोगकर्ता की निजता रखरखाव किया जा रहा है. हालांकि, कलर स्पेस की सटीक सुविधा उपलब्ध है, क्योंकि यह ऐसा नहीं है खास तौर पर, उपयोगकर्ता के हार्डवेयर की क्षमताओं के हिसाब से तय होता है.

कलर गैमट से जुड़ी सहायता क्वेरी

ये कोड उदाहरण, वेबसाइट पर आने वाले उपयोगकर्ता के कलर रेंज की जांच करते हैं डिसप्ले.

सीएसएस से पता करें

सहायता से जुड़ी सबसे कम सटीक पूछताछ 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

ऊपर दिए गए पैटर्न को बाकी मीडिया क्वेरी के लिए कॉपी किया जा सकता है.

कलर स्पेस से जुड़ी सहायता से जुड़ी क्वेरी

नीचे दिए गए कोड के उदाहरण, वेबसाइट पर आने वाले उपयोगकर्ता के ब्राउज़र और उसे चुनने की जांच करते हैं छोटे-छोटे कलर स्पेस का भी इस्तेमाल कर सकते हैं.

सीएसएस से पता करें

किसी कलर स्पेस से जुड़ी सहायता के लिए, @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 DevTools की मदद से रंग डीबग करें

Chrome DevTools अपडेट किया गया है. इसमें डेवलपर की मदद करने के लिए, नए टूल उपलब्ध कराए गए हैं एचडी कलर बनाना, कन्वर्ट करना, और डीबग करना.

कलर पिकर अपडेट किया गया

कलर पिकर अब सभी नए कलर स्पेस के साथ काम करता है. लेखकों को ये काम करने की अनुमति देना इससे चैनल को उसी तरह इंटरैक्ट किया जा सकता है जैसे वे कर सकते थे.

गैमुट सीमाएं

एक गामट सीमा रेखा भी जोड़ दी गई है, जो एसआरजीबी और के बीच एक लाइन बनाती है Display-p3 गेम में देख सकते हैं. यह साफ़ तौर पर बताना कि चुना गया रंग किस गेम में है.

इससे लेखकों को एचडी कलर और बिना एचडी वाले रंगों के बीच अंतर करने में मदद मिलती है. यह खास तौर पर तब मददगार होता है, जब color() फ़ंक्शन और नए वर्शन के साथ काम करना हो कलर स्पेस इसलिए बनाए जाते हैं, क्योंकि इनमें नॉन-एचडी और एचडी, दोनों तरह के कलर बनाए जा सकते हैं. अगर आपने आपको यह जानना है कि आपका रंग किस रेंज में है, कलर पिकर पॉप-अप करें और देखें!

रंगों को बदलें

DevTools, hsl, hwb, आरजीबी, और हेक्स कोड के हिसाब से लंबे समय तक इस्तेमाल करता रहता है. इमेज में, स्क्वेयर कलर स्वैच पर shift + click यह कन्वर्ज़न करने के लिए स्टाइल पैनल. नए रंग टूल न सिर्फ़ साइकल में कन्वर्ज़न के ज़रिए, वे एक डायलॉग बॉक्स दिखाते हैं, जहां लेखक नहीं मिल सकता.

रूपांतरण करते समय, यह जानना ज़रूरी है कि रूपांतरण स्पेस. DevTools में अब बदले गए रंग के लिए एक चेतावनी आइकॉन है. इससे आपको सूचना मिलेगी इस क्लिपिंग के लिए.

DevTools में सीएसएस डीबग करने की सुविधा के बारे में ज़्यादा जानें.

अगले चरण

ज़्यादा वाइब्रेंट, लगातार हेर-फेर और इंटरपोलेशन, और कुल मिलाकर बेहतरीन नतीजे देते हैं को और भी शानदार अनुभव मिलेगा.

रंग से जुड़े संसाधनों के बारे में और पढ़ें देखें.