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

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 क्लाइंट संकेत हेडर की मदद से, साइटें अनुरोध के समय उपयोगकर्ता की मोशन से जुड़ी प्राथमिकताओं का पता लगा सकती हैं. इससे सर्वर, परफ़ॉर्मेंस की वजहों के लिए सही सीएसएस को इनलाइन कर पाते हैं.

डेमो

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

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

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

सीएसएस वर्किंग ग्रुप, फ़िलहाल उपयोगकर्ता की पसंद की मीडिया क्वेरी के लिए स्टैंडर्ड तय कर रहा है. जैसे, 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; का यह तरीका काम नहीं करेगा. यहां तक कि ऊपर दिए गए हैक को सभी वेबसाइटों पर सफल होने की गारंटी नहीं होती है (उदाहरण के लिए, यह वेब ऐनिमेशन एपीआई के ज़रिए शुरू की गई मोशन को नहीं रोक सकता), इसलिए समस्या ठीक होने पर इसे बंद करना न भूलें.

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

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

स्वीकार की गई

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