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

कम मोशन वाली मीडिया क्वेरी से पता चलता है कि उपयोगकर्ता ने ऑपरेटिंग सिस्टम से, ऐनिमेशन या मोशन की मात्रा कम करने का अनुरोध किया है या नहीं.

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

सीएसएस और 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 का इस्तेमाल करने का तरीका बताने के लिए, मान लें कि मैंने 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-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 पर, हन्नाह कौहेप की हीरो इमेज.