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

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

थॉमस स्टेनर

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

ब्राउज़र सहायता

• 74
• 79
• 63
• 10.1

सोर्स

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

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

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

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

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

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> कॉन्टेक्स्ट से मीडिया क्वेरी के साथ काम करना

इस्तेमाल का एक दिलचस्प उदाहरण यह है कि media एट्रिब्यूट के आधार पर, ऐनिमेशन वाले AVIF, WebP या GIF को चलाया जा सकता है. अगर (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 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 ऐनिमेशन API से शुरू हुई मोशन को नहीं रोका जा सकता). इसलिए, गड़बड़ी का पता चलने पर इसे बंद ज़रूर करें.

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

• मीडिया क्वेरी लेवल 5 की खास जानकारी के लिए, एडिटर का ड्राफ़्ट.
• Chrome Platform की स्थिति पर prefers-reduced-motion.
• prefers-reduced-motion Chromium की गड़बड़ी.
• ब्लिंक पोस्ट करने की कोशिश करना.

स्वीकार हैं

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