सीएसएस prefers-reduced-transparency

ऐसे उपयोगकर्ताओं के लिए ऑप्टिमाइज़ और अडजस्ट करें जो पारदर्शी यूज़र इंटरफ़ेस (यूआई) पसंद नहीं करते.

Adam Argyle

Chrome 118 में, सीएसएस मीडिया क्वेरी 5 की नई मीडिया क्वेरी सुविधा prefers-reduced-transparency उपलब्ध है. पारदर्शी इंटरफ़ेस से सिरदर्द हो सकता है या अलग-अलग तरह की दृष्टि से जुड़ी समस्याओं के लिए, इन्हें देखना मुश्किल हो सकता है. इसलिए, Windows, macOS, और iOS में सिस्टम की प्राथमिकताएं होती हैं, जिनसे यूज़र इंटरफ़ेस (यूआई) में पारदर्शिता को कम या हटाया जा सकता है.

ब्राउज़र में इस नई मीडिया क्वेरी की मदद से, सीएसएस उपयोगकर्ताओं के लिए इंटरफ़ेस को अडजस्ट कर सकती है. ऐसा तब किया जाता है, जब उपयोगकर्ता पारदर्शिता को कम करने की इच्छा जताते हैं:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

पिछले कोड के उदाहरण में, सीएसएस वैरिएबल में 50% पर ओपैसिटी वैल्यू होती है. इसके बाद, इसका इस्तेमाल एचएसएल के साथ किया जाता है, ताकि नीले रंग का सेमी-ट्रांसफ़रेंट बैकग्राउंड बनाया जा सके. नेस्ट की गई मीडिया क्वेरी, उपयोगकर्ता की प्राथमिकता के हिसाब से, पारदर्शिता को कम करने की जांच करती है. अगर यह सही है, तो ओपैसिटी वेरिएबल को 95% पर सेट कर दिया जाता है. यह वैल्यू, पूरी तरह से ओपैसिटी वाली वैल्यू के करीब होती है.

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

पारदर्शिता को कम करने के उदाहरण

अगले कुछ सेक्शन में, आपको ऐसे मौके और अहम जानकारी दी जाएगी जिससे आपको पारदर्शिता को कम करने में मदद मिलेगी.

इमेज पर आधा-पारदर्शी कैप्शन

इमेज या वीडियो के थंबनेल पर, आधा पारदर्शी कैप्शन या खास जानकारी को ओवरले करना आम बात है. इस उदाहरण में, पारदर्शिता को कम करने की प्राथमिकता को मैनेज करने का एक तरीका बताया गया है. ओवरले पूरी तरह से हटा दिया जाता है और कैप्शन का वही कॉन्टेंट, इमेज के नीचे दिखाया जाता है, जो ओवरले के बजाय दिखाया जाता है.

पारदर्शी मोडल, सूचनाएं, और पॉपओवर

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

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

अडैप्टिव फ़्रॉस्टेड ग्लास

इमेज ओवरले का एक और लोकप्रिय स्टाइल, फ़्रॉस्टेड-ग्लास (धुंधला शीशा) है. इस उदाहरण में, कैप्शन के पीछे मौजूद इमेज, प्रॉडक्ट इमेज का मिरर रिफ़्लेक्शन है. इसकी कुछ वजहें हैं: इमेज को काटा नहीं जाता और आखिरी नतीजे में, लाइट या डार्क मोड की प्राथमिकता थोड़ी ज़्यादा दिख सकती है.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

हीरो हेडर

होम पेज के सामान्य एलिमेंट में, बोल्ड मैसेज को लूप में चलने वाले वीडियो या ऐनिमेशन वाली इमेज के ऊपर दिखाया जाता है. यहां दिए गए उदाहरण में, रंगीन और आधा पारदर्शी ग्रेडिएंट ओवरले और अनलिमिटेड ऐनिमेशन वाली बैकग्राउंड इमेज है. इससे कई लोगों का ध्यान खींचा जा सकता है. हालांकि, पारदर्शिता और गति के साथ कम कंट्रास्ट होने की वजह से, कई लोगों को समस्याएं भी हो सकती हैं.

इसे दो सीएसएस मीडिया क्वेरी की मदद से ठीक किया जा सकता है: prefers-reduced-motion और prefers-reduced-transparency. कम मोशन वाली मीडिया क्वेरी में, अनलिमिटेड ऐनिमेशन सिर्फ़ तब लागू किया जा सकता है, जब उपयोगकर्ता ने कम मोशन के लिए "कोई प्राथमिकता नहीं" चुना हो. इससे कोड को यह सिग्नल मिलता है कि इस उपयोगकर्ता के लिए मोशन ठीक है.

इसके अलावा, कम पारदर्शिता वाली मीडिया क्वेरी की मदद से, ओपैसिटी को कम किया जा सकता है, ताकि ओवरले का रंग करीब 100% हो. अब मैसेज को आसानी से पढ़ा जा सकता है. इसके लिए, आपको मोशन डिस्ट्रैक्शन या कंट्रास्ट से जुड़ी समस्याओं का सामना नहीं करना पड़ेगा.

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

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

उपयोगकर्ता की प्राथमिकताओं के बारे में जोड़ने वाले बनाम घटाने वाले नज़रिए

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

@media (prefers-reduced-transparency: no-preference) {
  …
}

डेवलपर और डिज़ाइनर अक्सर इन प्राथमिकताओं के आधार पर, उपयोगकर्ता अनुभव को "फ़ॉलबैक" करते हैं. मीडिया क्वेरी में, यह "कम करें" के तौर पर दिखता है. इस दौरान, यूज़र इंटरफ़ेस (यूआई) से कुछ हटाया जाता है. इस उदाहरण में, उपयोगकर्ता की सहमति मिलने पर, मोशन और पारदर्शिता जोड़ी जाती है.

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

DevTools

Chrome DevTools, रेंडरिंग टैब में पारदर्शिता को कम करने के लिए, इस प्राथमिकता को एमुलेट कर सकता है. यहां दिए गए वीडियो में, फ़्रॉस्टेड ग्लास कार्ड के हल्के, गहरे, पारदर्शी, और कम पारदर्शी वैरिएंट दिखाने के लिए, prefers-color-scheme और prefers-reduced-transparency मीडिया क्वेरी को टॉगल करने का तरीका देखें.