इस पेज का अनुवाद Cloud Translation API से किया गया है.

सीएसएस prefers-reduced-transparency

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

Adam Argyle

Chrome 118 में, CSS मीडिया क्वेरी 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 मीडिया क्वेरी को टॉगल करने का तरीका देखें.

https://codepen.io/web-dot-dev/pen/dyaojxr