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

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

Thomas Steiner

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 74
• 79
• 63
• 10.1

सोर्स

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

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

असल ज़िंदगी में विज़ुअल ओवरलोड.

कभी-कभी, वेब पर भी ऐसा हो सकता है: फ़्लैश करने वाले विज्ञापन, शानदार पैरलॅक्स इफ़ेक्ट, अचानक दिखने वाले ऐनिमेशन, अपने-आप चलने वाले वीडियो वगैरह की वजह से, वेब कभी-कभी काफ़ी परेशान कर सकता है… खुशी की बात है कि असल ज़िंदगी के उलट, इसका समाधान है. सीएसएस मीडिया क्वेरी 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;
  }
}

ध्यान दें: अगर आपके पास ऐनिमेशन से जुड़ी बहुत सी सीएसएस है, तो आपके पास उन उपयोगकर्ताओं को इसे डाउनलोड करने से रोकने का विकल्प है जिन्होंने ऑप्ट-आउट किया है. इसके लिए, ऐनिमेशन से जुड़ी सभी सीएसएस को एक अलग स्टाइल शीट में भेजें. इस स्टाइल शीट को सिर्फ़ link एलिमेंट पर media एट्रिब्यूट का इस्तेमाल करके, शर्तों के हिसाब से लोड किया जा सकता है 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

JavaScript के साथ prefers-reduced-motion का इस्तेमाल करने का तरीका बताने के लिए, मान लें कि मैंने Web Animations API का इस्तेमाल करके, एक जटिल ऐनिमेशन तय किया है. उपयोगकर्ता की प्राथमिकता बदलने पर, ब्राउज़र सीएसएस नियमों को डाइनैमिक तौर पर ट्रिगर करेगा. हालांकि, 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 क्लाइंट हिंट हेडर की मदद से, साइटें अनुरोध के समय उपयोगकर्ता की मोशन से जुड़ी प्राथमिकताएं हासिल कर सकती हैं. हालांकि, ऐसा करना ज़रूरी नहीं है. इससे सर्वर को परफ़ॉर्मेंस के लिहाज़ से सही सीएसएस इनलाइन करने में मदद मिलती है.

डेमो

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

ऐप्लिकेशन के 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 पर जाएं.
• prefers-reduced-motion Chromium बग.
• Blink पोस्ट करने की सुविधा लागू करने का इंटेंट.

धन्यवाद

स्टीफ़न मैकग्रूर को धन्यवाद, जिन्होंने Chrome में prefers-reduced-motion को लागू किया है. साथ ही, रॉब डॉसन के साथ मिलकर, इस दस्तावेज़ की समीक्षा भी की है. Unsplash पर, हन्नाह कौहेप की हीरो इमेज.