उन उपयोगकर्ताओं के लिए ऑप्टिमाइज़ और एडजस्ट करें जो ओपेक यूज़र इंटरफ़ेस (यूआई) पसंद करते हैं.
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 और start-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, रेंडरिंग टैब में कम पारदर्शिता (और दूसरी चीज़ों) के लिए इस प्राथमिकता को एम्युलेट कर सकता है. इस वीडियो में, फ़्रॉस्टेड ग्लास कार्ड के हल्के, गहरे, पारदर्शी, और कम पारदर्शिता वाले वैरिएंट दिखाने के लिए, purchase-color-scheme और purchase-reduced-transparency की मीडिया क्वेरी को टॉगल करने का तरीका जानें.