ज़्यादा कंट्रास्ट वाली सेटिंग के हिसाब से स्क्रोलबार को अडजस्ट करना

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

इस गाइड में, @media (prefers-contrast: more) सीएसएस मीडिया सुविधा का इस्तेमाल करके, ज़्यादा कंट्रास्ट वाली स्क्रोलबार स्टाइलिंग लागू करने के बारे में वैकल्पिक निर्देश दिए गए हैं.

पठनीयता बेहतर बनाएं

scrollbar-color या कस्टम वैरिएबल की मदद से स्क्रोलबार को पसंद के मुताबिक बनाते समय, हाई-कंट्रास्ट मोड के लिए साफ़ तौर पर बदलाव किया जा सकता है. यह सुविधा खास तौर पर तब मददगार होती है, जब आपके ऐप्लिकेशन की मुख्य थीम में, कम कंट्रास्ट वाले स्क्रोलबार का इस्तेमाल किया जाता है.

ज़रूरी नहीं: थंब और ट्रैक के लिए गहरे और अलग-अलग रंगों को तय करने के लिए, @media (prefers-contrast: more) ब्लॉक का इस्तेमाल करें.

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

scrollbar-color का इस्तेमाल करते समय ध्यान रखने वाली बातें

• scrollbar-color को ऐनिमेट या ट्रांज़िशन न करें. WebKit की गड़बड़ी की वजह से, scrollbar-color में बदलाव होने पर स्क्रोलबार टिमटिमाता है.
• macOS पर, scrollbar-color (स्टैंडर्ड) और ::-webkit-scrollbar (लेगसी) प्रॉपर्टी को डिफ़ॉल्ट रूप से अनदेखा कर दिया जाता है. इसकी वजह यह है कि macOS, नेटिव "ओवरले" स्क्रोलबार का इस्तेमाल करता है. आपको पसंद के मुताबिक चुने गए रंगों को scrollbar-width (जैसे, thin या auto) के साथ जोड़ना होगा, ताकि macOS उन्हें रेंडर कर सके.
• scrollbar-width लागू होने के बाद भी, macOS ओवरले स्क्रोलबार, डिफ़ॉल्ट रूप से ट्रैक (गटर) को पारदर्शी के तौर पर रेंडर करते हैं. अगर डिज़ाइन के लिए MacOS पर ट्रैक का बैकग्राउंड कलर दिखना ज़रूरी है, तो आपको स्क्रोल किए जा सकने वाले कंटेनर पर scrollbar-gutter: stable; लागू करना होगा. हालांकि, ध्यान दें कि यह उपयोगकर्ता के स्क्रोलबार पर कर्सर घुमाने के बाद ही दिखता है.
• scrollbar-gutter: stable के साथ भी, MacOS पर ट्रैक पारदर्शी हो सकता है. थंब को दिखने के लिए, ट्रैक के रंग पर निर्भर नहीं होना चाहिए.

फ़ॉलबैक और ब्राउज़र के साथ काम करना

scrollbar-color के लिए फ़ॉलबैक और ब्राउज़र सहायता

यह सुविधा, परतदार वृद्धि है. इसके लिए, हमेशा फ़ॉलबैक की ज़रूरत नहीं होती.

अगर स्टाइलिंग ज़रूरी है और उपयोगकर्ता का Baseline टारगेट "Baseline Widely Available" या इससे पहले का है, तो आपको फ़ॉलबैक के तौर पर, स्टैंडर्ड के मुताबिक न होने वाले ::-webkit-scrollbar सूडो-एलिमेंट शामिल करने चाहिए.

लेगसी फ़ॉलबैक को @supports not (scrollbar-color: auto) ब्लॉक में रैप करें, ताकि स्टैंडर्ड प्रॉपर्टी और लेगसी WebKit सिलेक्टर के बीच टकराव को रोका जा सके. ऐसा उन ब्राउज़र में करें जो दोनों को नेटिव तौर पर सपोर्ट करते हैं.

अगर रंगों को तय करने के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया जा रहा है, तो ये लेगसी WebKit सिलेक्टर पर अपने-आप लागू हो जाएंगी. आपको उन्हें डुप्लीकेट करने की ज़रूरत नहीं है.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}