befores-reduced-motion: कभी-कभी कम मूवमेंट ज़्यादा होता है

Pres-reduced-motion मीडिया क्वेरी से यह पता चलता है कि उपयोगकर्ता ने अनुरोध किया है या नहीं ऑपरेटिंग सिस्टम को कम करने के लिए डिज़ाइन किया जा सकता है.

Thomas Steiner

सभी लोगों को सजावटी ऐनिमेशन या ट्रांज़िशन पसंद नहीं आते. साथ ही, कुछ लोगों को वीडियो देखते समय एक जैसा अनुभव मिलता है पैरालैक्स स्क्रोलिंग, ज़ूमिंग इफ़ेक्ट वगैरह के साथ आने पर होने वाली बीमारी. उपयोगकर्ता की पसंद का मीडिया क्वेरी prefers-reduced-motion की मदद से आप उन उपयोगकर्ताओं के लिए अपनी साइट का मोशन कम किया गया वैरिएंट डिज़ाइन कर सकते हैं जिन्हें ने यह प्राथमिकता व्यक्त की है.

इंटरनेट पर और असल ज़िंदगी में बहुत ज़्यादा हलचल होना

उस दिन, मैं अपने बच्चों के साथ आइस स्केटिंग कर रहा था. वह दिन बहुत ही अच्छा था, चमकता हुआ सूरज और बर्फ़ रिंक लोगों से भरा हुआ था ⛸. इसमें सिर्फ़ एक समस्या है: मैं भीड़ का सामना नहीं कर पाता. साथ ही मैं किसी भी चीज़ पर अपना ध्यान केंद्रित नहीं कर पाता हूं और आखिर में मुझे पूरा महसूस होता है ज़रूरत से ज़्यादा विज़ुअल देखना, जो किसी एंथाइल को घूरने जैसा होता है 🐜.

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

इस सुविधा के बारे में ज़्यादा जानने से पहले, थोड़ा पीछे जाएं और यह सोचें कि ऐनिमेशन का इस्तेमाल किन चीज़ों के लिए किया जा रहा है वेब पर. अगर आप चाहें, तो बैकग्राउंड की जानकारी को स्किप करें और सीधे तकनीकी जानकारी देखें.

वेब पर ऐनिमेशन

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

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

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

हलचल से होने वाली वेस्टिबुलर स्पेक्ट्रम डिसऑर्डर

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

ऑपरेटिंग सिस्टम से मोशन हटाएं

कई ऑपरेटिंग सिस्टम में सुलभता सेटिंग होती हैं. इनमें सुलभता सेटिंग की मदद से, यह तय करना होता है कि किस उपयोगकर्ता के लिए काफ़ी देर तक हिलती-डुलती रहती हैं. नीचे दिए गए स्क्रीनशॉट में, macOS Mojave की कम मोशन की सेटिंग और Android Pie की ऐनिमेशन हटाने की प्राथमिकता. जब चेक किया जाता है, तो ये प्राथमिकताएँ ऑपरेटिंग सिस्टम में सजावट वाले इफ़ेक्ट इस्तेमाल न किए जाएं. जैसे, ऐप्लिकेशन लॉन्च करने के लिए ऐनिमेशन इस्तेमाल करना. ऐप्लिकेशन स्वयं यह कर सकते हैं और भी इस सेटिंग का पालन करना चाहिए और सभी गैर-ज़रूरी ऐनिमेशन हटा देने चाहिए.

वेब पर मोशन हटाएं

मीडिया क्वेरी लेवल 5 विकल्प को चुनने पर, वेब पर उपयोगकर्ता की पसंद को भी ध्यान में रखें. मीडिया क्वेरी, लेखकों को वैल्यू या सुविधाओं की जांच करने और क्वेरी करने की अनुमति देती हैं रेंडर किए जा रहे दस्तावेज़ के बावजूद, उपयोगकर्ता एजेंट या डिसप्ले डिवाइस के लिए. मीडिया क्वेरी prefers-reduced-motion का इस्तेमाल किया गया है यह पता लगाने के लिए उपयोगकर्ता ने ऑपरेटिंग सिस्टम में प्राथमिकता को छोटा करने के लिए सेट किया है या नहीं इस्तेमाल करती है. इसमें दो संभावित वैल्यू हो सकती हैं:

• no-preference: इससे पता चलता है कि उपयोगकर्ता ने मौजूदा ऑपरेटिंग सिस्टम को प्राथमिकता नहीं दी है सिस्टम. बूलियन कॉन्टेक्स्ट में इस कीवर्ड वैल्यू का आकलन false के तौर पर होता है.
• reduce: इससे पता चलता है कि उपयोगकर्ता ने ऑपरेटिंग सिस्टम की प्राथमिकता सेट की है. इससे यह पता चलता है कि इंटरफ़ेस में हलचल या ऐनिमेशन कम होना चाहिए, खासकर उस जगह जहां सभी गै़र-ज़रूरी चीज़ें गतिविधि निकाल दी जाती है.

CSS और JavaScript के कॉन्टेक्स्ट से मीडिया क्वेरी के साथ काम करना

सभी मीडिया क्वेरी की तरह ही, prefers-reduced-motion को सीएसएस कॉन्टेक्स्ट और JavaScript कॉन्टेक्स्ट.

इन दोनों बातों को समझाने के लिए, मान लें कि मेरे पास एक ज़रूरी साइन अप बटन है, जिस पर मैं चाहता/चाहती हूं कि उपयोगकर्ता उस पर क्लिक करे. मैं ध्यान खींचने वाला "वाइब्रेट" शब्द सेट कर सकते हैं, ऐनिमेशन, लेकिन एक अच्छे वेब नागरिक के रूप में मैं सिर्फ़ यह उन उपयोगकर्ताओं के लिए है जो एनिमेशन के साथ पूरी तरह से सहमत हैं, लेकिन सभी लोगों के लिए नहीं, जो कि जिन्होंने ऐनिमेशन से ऑप्ट आउट किया है या ऐसे ब्राउज़र इस्तेमाल करने वाले उपयोगकर्ता जो मीडिया क्वेरी को नहीं समझते.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

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

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

ध्यान दें कि असल मीडिया क्वेरी के आस-पास ब्रैकेट का होना ज़रूरी है:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

<picture> कॉन्टेक्स्ट से मीडिया क्वेरी के साथ काम करना

इस्तेमाल का एक दिलचस्प उदाहरण यह है कि ऐनिमेशन वाले AVIF, WebP या GIF को media एट्रिब्यूट की वैल्यू सबमिट करें. अगर (prefers-reduced-motion: no-preference) की वैल्यू true है, तो ऐनिमेशन वर्शन दिखाएं, या फिर स्टैटिक वर्शन:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

यह उदाहरण देखें. अंतर देखने के लिए अपने डिवाइस की गति प्राथमिकताओं को टॉगल करके देखें.

अनुरोध करते समय उपयोगकर्ता की प्राथमिकताएं देखें

Sec-CH-Prefers-Reduced-Motion क्लाइंट संकेत हेडर अनुरोध के समय, साइटों को उपयोगकर्ता की हलचल से जुड़ी सेटिंग पाने की अनुमति देता है. हालांकि, ऐसा करना ज़रूरी नहीं है, की मदद से सर्वर सही सीएसएस को इनलाइन कर सकें.

डेमो

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

मीटिंग में सामने आए नतीजे

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

सीएसएस वर्किंग ग्रुप, स्टैंडर्ड के हिसाब से उपयोगकर्ता की पसंद की मीडिया क्वेरी, जैसे prefers-reduced-transparency (यह पता लगाता है कि क्या उपयोगकर्ता कम पारदर्शिता को प्राथमिकता देता है), prefers-contrast (पता लगाता है कि उपयोगकर्ता ने सिस्टम से पास-पास मौजूद रंगों के बीच कंट्रास्ट को बढ़ाने या घटाने का अनुरोध किया है), और inverted-colors (पता लगाता है कि उपयोगकर्ता इन्वर्टेड कलर को प्राथमिकता देता है).

(बोनस) सभी वेबसाइटों पर जबरदस्ती कम की गई मोशन

हर साइट, prefers-reduced-motion का इस्तेमाल नहीं करती. ऐसा भी हो सकता है कि यह साइट आपकी पसंद के मुताबिक न हो. अगर आपको, किसी भी वजह से, सभी वेबसाइटों पर मोशन को रोकना है, तो आपके पास ऐसा करने का विकल्प है. एक तरीका यह है कि ऐसा, विज़िट किए जाने वाले हर वेब पेज में, नीचे दिए गए सीएसएस के साथ एक स्टाइल शीट इंजेक्ट करने के लिए होता है. यह लीजिए कई ब्राउज़र एक्सटेंशन (अपने जोखिम पर इस्तेमाल करें!) की मदद से ऐसा किया जा सकता है.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

इसके काम करने का तरीका यह है कि पुराना सीएसएस, सभी ऐनिमेशन और ट्रांज़िशन की अवधि को बदल देता है इतना कम समय हो गया है कि अब उन पर ध्यान नहीं दिया जा सकता. दरअसल, कुछ वेबसाइटें ऐनिमेशन पर निर्भर करती हैं सही तरीके से काम करने के लिए चलाया जाना चाहिए (हो सकता है कि कोई विशेष चरण animationend इवेंट), animation: none !important; का इस्तेमाल करने का तरीका काम नहीं करेगा. यहां तक कि पिछले हैक से सभी वेबसाइटों पर सफल होने की गारंटी देता है (उदाहरण के लिए, यह Web Animations API), इसलिए पक्का करें कि कोई गड़बड़ी नज़र आने पर उसे बंद कर दें.

इसी विषय से जुड़े कुछ लिंक

• संपादक का नया ड्राफ़्ट मीडिया क्वेरी लेवल 5 स्पेसिफ़िकेशन.
• prefers-reduced-motion का मैंडेट चालू है Chrome प्लैटफ़ॉर्म की स्थिति.
• prefers-reduced-motion Chromium बग.
• ब्लिंक पोस्ट करने का मकसद.

स्वीकार की गई

इस प्रोग्राम को लागू करने वाले स्टीफ़न मैकग्रूर का बहुत-बहुत धन्यवाद prefers-reduced-motion को Chrome और उसके साथ मिलकर— रॉब डॉडसन—ने भी इस दस्तावेज़ की समीक्षा की है. Unस्प्लैश पर हैना कॉहेपे की हीरो इमेज.