Prefers-Color-Scheme और Prefers-Reduced-Motion
डार्क मोड और कम गति वाले एनीमेशन के लिए उपयोगकर्ता की सिस्टम प्राथमिकताओं का सम्मान करना सीखिए।
Prefers-Color-Scheme और Prefers-Reduced-Motion, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
उपयोगकर्ता की पसंद से जुड़ी मीडिया सुविधाएँ
CSS स्क्रीन आकार के अलावा उपयोगकर्ता की सिस्टम प्राथमिकताओं को भी जाँच सकता है। इससे आपकी साइट पर उपयोगकर्ता की कोई कार्रवाई किए बिना स्वचालित dark मोड और पहुँच-योग्यता के अनुकूल एनीमेशन सक्षम किए जा सकते हैं।
prefers-color-scheme
यह पता लगाता है कि उपयोगकर्ता ने अपने OS में light या dark मोड चुना है:
<p>This page follows your OS color-scheme preference.</p>
स्वचालित dark मोड लागू करना
सबसे साफ़ कार्यान्वयन में ऐसी CSS वेरिएबल का उपयोग किया जाता है जिनके मान प्राथमिकता के आधार पर बदलते हैं:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
कुछ उपयोगकर्ताओं को एनीमेशन से मितली या असहजता महसूस होती है। prefers-reduced-motion: reduce मीडिया सुविधा इस पहुँच-योग्यता प्राथमिकता का पता लगाती है।
<div class="box spun"></div>
गति संबंधी प्राथमिकताओं का सम्मान करना
सभी एनीमेशन बंद करने के बजाय, उनके हल्के वैकल्पिक रूप उपलब्ध कराएँ:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
यह पता लगाता है कि उपयोगकर्ता अधिक कॉन्ट्रास्ट (पहुँच-योग्यता के लिए) या कम कॉन्ट्रास्ट पसंद करता है। उसी के अनुसार रंग चुनें:
<p>Contrast-aware text</p>
prefers-reduced-transparency
दृष्टिबाधित कुछ उपयोगकर्ता कम पारदर्शिता पसंद करते हैं। backdrop-filter और opacity-आधारित प्रभावों को कम करें:
<div class="glass-card">Glass card</div>
JavaScript से प्राथमिकताओं तक पहुँच
window.matchMedia() का उपयोग करके JavaScript से इन प्राथमिकताओं की जाँच करें:
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
सिस्टम प्राथमिकता और मैन्युअल ओवरराइड
डिफ़ॉल्ट रूप से सिस्टम प्राथमिकता का सम्मान करें और उपयोगकर्ताओं को toggle से इसे बदलने दें। इस बदलाव को localStorage में सहेजें और <html> पर एक वर्ग लागू करें:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
यह पता लगाता है कि उपयोगकर्ता ने डेटा-बचत मोड सक्षम किया है या नहीं। छोटे चित्र उपलब्ध कराएँ या गैर-ज़रूरी संसाधनों को छोड़ दें:
<div class="hero">Hero banner</div>
DevTools में परीक्षण
Chrome DevTools में रेंडरिंग टैब आपको OS की सेटिंग बदले बिना dark मोड, कम गति और अन्य प्राथमिकता वाली मीडिया सुविधाओं का अनुकरण करने देता है।
त्वरित जाँच
ऐसा स्वचालित dark मोड लागू करने का सबसे अच्छा तरीका क्या है जो उपयोगकर्ता के मैन्युअल toggle का भी समर्थन कर सके?
पुनरावलोकन
prefers-color-scheme स्वचालित dark मोड सक्षम करता है। पहुँच-योग्यता के लिए prefers-reduced-motion को एनीमेशन बंद या सरल करना चाहिए। साफ़ और आसानी से बनाए रखने योग्य कोड के लिए दोनों को CSS वेरिएबल के साथ लागू करें। उपयोगकर्ताओं को अपनी प्राथमिकता OS से स्वतंत्र रूप से नियंत्रित करने देने के लिए हमेशा मैन्युअल ओवरराइड उपलब्ध कराएँ।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “Prefers-Color-Scheme और Prefers-Reduced-Motion” पाठ निःशुल्क है?
हाँ—“Prefers-Color-Scheme और Prefers-Reduced-Motion” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Prefers-Color-Scheme और Prefers-Reduced-Motion” में मैं क्या सीखूँगा?
डार्क मोड और कम गति वाले एनीमेशन के लिए उपयोगकर्ता की सिस्टम प्राथमिकताओं का सम्मान करना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“Prefers-Color-Scheme और Prefers-Reduced-Motion” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- सिंटैक्स और सामान्य ब्रेकपॉइंट
- चौड़ाई, ऊँचाई और ओरिएंटेशन क्वेरी
- Prefers-Color-Scheme और Prefers-Reduced-Motion
- कई मीडिया क्वेरी को संयोजित करना