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

prefers-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 है. यह पता लगाता है कि उपयोगकर्ता को हल्के या गहरे रंग वाली थीम पसंद है. मेरे लेख Hello Darkness, My Old Friend 🌒 में, 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 Platform Status पर जाएं.
• prefers-reduced-motion Chromium में गड़बड़ी.
• Blink Intent to Implement posting.

Acknowledgements

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