यह दस्तावेज़, हाई-डेफ़िनिशन सीएसएस की कलर गाइड का हिस्सा है.
आपके वेब प्रोजेक्ट के रंग को पूरे गैमट डिसप्ले के साथ काम करने के लिए अपडेट करने की दो मुख्य रणनीतियां हैं:
आकर्षक गिरावट: नए कलर स्पेस का इस्तेमाल करें और ब्राउज़र और ऑपरेटिंग सिस्टम को यह तय करने दें कि डिसप्ले क्षमताओं के आधार पर कौनसा रंग दिखाना है.
प्रोग्रेसिव एन्हैंसमेंट: उपयोगकर्ता के ब्राउज़र की क्षमताओं का आकलन करने के लिए,
@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 को क्लैंप करता है, इसलिए इसकी ज़िम्मेदारी ब्राउज़र की ही होती है.
- नुकसान
- ब्राउज़र, क्लैंप या गैमट मैप को उस रंग में बदल सकता है जो आपको पसंद न हो.
- शायद ब्राउज़र रंग का अनुरोध न समझ पाए और पूरी तरह से काम न कर सके. हालांकि, दो बार रंग तय करके इसे कम किया जा सकता है. इससे कैस्केड उस रंग पर वापस आ जाता है जिसे वह समझ पाता है.
प्रोग्रेसिव एन्हैंसमेंट
- फ़ायदे
- रंग की क्वालिटी को मैनेज करके, ज़्यादा कंट्रोल मिलता है.
- मौजूदा कलर पर कोई असर न डालने वाली अतिरिक्त रणनीति.
- नुकसान
- आपको दो अलग-अलग कलर सिंटैक्स मैनेज करने होंगे.
- आपको दो अलग-अलग कलर गैमट मैनेज करने होंगे.
गैमट और कलर स्पेस की सुविधा के बारे में जानना
ब्राउज़र कई तरह की सुविधाओं के लिए सहायता की जांच करने देता है. साथ ही, सीएसएस और 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 */
}
सहायता की जांच करने के लिए, दो अतिरिक्त मीडिया क्वेरी हैं:
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 में सीएसएस को डीबग करने की सुविधा के बारे में ज़्यादा जानें.
अगले चरण
ज़्यादा वाइब्रेंस, एक जैसे बदलाव, और अनुमान लगाने की सुविधा, और कुल मिलाकर आपके उपयोगकर्ताओं को ज़्यादा रंगीन अनुभव मिलता है.
गाइड से, रंग के संसाधन के बारे में और पढ़ें.