Frontend Academy · पाठ

prefers-reduced-motion का सम्मान करना

prefers-reduced-motion media query का पता लगाएँ और कम motion का अनुरोध करने वाले users के लिए animations को disable या कम करें।

पाठ 4, कुल 4 में से13 चरण

prefers-reduced-motion का सम्मान करना, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

prefers-reduced-motion मीडिया सुविधा

कुछ उपयोगकर्ताओं को यूआई में गति से मितली, चक्कर या दौरे पड़ सकते हैं। वे अपने OS में गति कम करने का विकल्प चुनते हैं। prefers-reduced-motion मीडिया सुविधा इस पसंद का पता लगाती है, ताकि CSS उसके अनुसार प्रतिक्रिया दे सके।

CSS में कम गति का पता लगाना

एनीमेशन को विपरीत क्वेरी में लपेटें: सामान्य रूप से एनीमेशन लागू करें, फिर कम गति पसंद करने वाले उपयोगकर्ताओं के लिए उसे बदलें या बंद करें।

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

‘कम, शून्य नहीं’ सिद्धांत

prefers-reduced-motion: reduce का अर्थ गति बिल्कुल समाप्त करना नहीं है। कुछ गति यूआई की महत्वपूर्ण अवस्था में बदलाव बताती है। एनीमेशन पूरी तरह हटाने के बजाय उन्हें धीमा करें या क्रॉसफ़ेड जैसे सरल प्रभावों में बदलें।

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

अंतिम उपाय: सभी एनीमेशन बंद करना

कम गति पसंद करने वाले उपयोगकर्ताओं के लिए सभी ट्रांज़िशन और एनीमेशन को वैश्विक रूप से बंद करना एक सामान्य तरीका है। यह एक सुरक्षित आधारभूत विकल्प है, भले ही हर एनीमेशन को अलग-अलग समायोजित न किया गया हो।

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JavaScript में कम गति का पता लगाना

JavaScript में इस पसंद का पता लगाने के लिए matchMedia API का उपयोग करें — यह कैनवास एनीमेशन, JavaScript से नियंत्रित गति या वीडियो के अपने-आप चलने को नियंत्रित करने में उपयोगी है।

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

स्क्रॉल व्यवहार और अपने-आप चलना

कम गति पसंद करने वाले उपयोगकर्ताओं के लिए सहज स्क्रॉल भी बंद करें: scroll-behavior: auto। वीडियो को अपने-आप चलना बंद करें। सामग्री को चमकाएँ या स्ट्रोब प्रभाव न दें।

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3 — इंटरैक्शन से होने वाला एनीमेशन

WCAG 2.3.3 (स्तर AAA) के अनुसार उपयोगकर्ता के इंटरैक्शन से शुरू होने वाली गति को बंद किया जा सकना चाहिए। prefers-reduced-motion का सम्मान करके आप इस मानदंड को पूरा करते हैं और वेस्टिब्यूलर विकारों वाले उपयोगकर्ताओं के लिए सुगम्यता बेहतर बनाते हैं।

कम गति का परीक्षण

Chrome DevTools में: रेंडरिंग पैनल खोलें (तीन-बिंदु मेनू → More tools → Rendering) और ‘Emulate CSS media feature prefers-reduced-motion’ को टॉगल करें। रिलीज़ करने से पहले इस मोड में अपने यूआई का परीक्षण करें।

अभ्यास: सुरक्षित एनीमेशन पैटर्न

गति-सुरक्षित एनीमेशन डिफ़ॉल्ट रूप से लागू होता है और इस तरह लपेटा जाता है कि उसे वैश्विक रूप से आसानी से बंद किया जा सके।

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

फ़ोकस एनीमेशन बना रहना चाहिए

फ़ोकस संकेतक (फ़ोकस किए गए एलिमेंट को दिखाने वाला घेरा) को कम गति पसंद करने वाले उपयोगकर्ताओं के लिए भी NOT हटाना चाहिए। ये कीबोर्ड नेविगेशन के लिए आवश्यक हैं और सामान्यतः वेस्टिब्यूलर ट्रिगर नहीं होते।

लाइब्रेरी और prefers-reduced-motion

लोकप्रिय एनीमेशन लाइब्रेरी, जैसे फ्रेमर मोशन, GSAP और Anime.js, कम गति के लिए अंतर्निहित समर्थन देती हैं। फ्रेमर मोशन का useReducedMotion() हुक React में जटिल एनीमेशन को शर्त के अनुसार बंद करना आसान बनाता है।

त्वरित जाँच

कौन-सी CSS मीडिया सुविधा यूआई में कम गति देखने की उपयोगकर्ता की पसंद का पता लगाती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: prefers-reduced-motion

कुछ उपयोगकर्ताओं को वेस्टिब्यूलर और तंत्रिका-स्वास्थ्य संबंधी कारणों से कम गति की आवश्यकता होती है। एनीमेशन को बंद या सरल करने के लिए @media (prefers-reduced-motion: reduce) का उपयोग करें। JS में matchMedia से इसका पता लगाएँ। अंतिम उपाय: वैश्विक रूप से animation/transition-duration को 0.01ms पर सेट करें। WCAG 2.3.3 इसकी अनुशंसा करता है। DevTools के रेंडरिंग पैनल से परीक्षण करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “prefers-reduced-motion का सम्मान करना” पाठ निःशुल्क है?

हाँ—“prefers-reduced-motion का सम्मान करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“prefers-reduced-motion का सम्मान करना” में मैं क्या सीखूँगा?

prefers-reduced-motion media query का पता लगाएँ और कम motion का अनुरोध करने वाले users के लिए animations को disable या कम करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“prefers-reduced-motion का सम्मान करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

CSS Custom Properties: घोषित करना और update करना
Transitions: property, duration, timing
@keyframes Animations
prefers-reduced-motion का सम्मान करना

← Frontend Academy पर वापस जाएँ