सीएसएस prefers-reduced-transparency

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

Adam Argyle

Chrome 118 की नई मीडिया क्वेरी सुविधा prefers-reduced-transparency CSS मीडिया क्वेरी 5 से उपलब्ध हैं. नॉन-ओपेक इंटरफ़ेस से सिर दर्द हो सकता है या इंटरफ़ेस को देखने में परेशानी हो सकती है देखने की क्षमता में कमी. यही वजह है कि 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%;
  }
}

हीरो हेडर

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

इसे दो सीएसएस मीडिया क्वेरी की मदद से ठीक किया जा सकता है: प्रेरणा देने वाले वीडियो बनाना और Pres-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) {
  …
}

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

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

डेवलपर टूल

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