CSS मीडिया अभिव्यक्तियाँ अधिकतम-चौड़ाई से अधिक हैं

हाल ही में, हमने अपनी नई Mabiloft वेबसाइट को पूरी तरह से डिज़ाइन किए गए स्वच्छ डिज़ाइन और बहुत सारे नए चित्र और एनिमेशन के साथ प्रकाशित किया।

हमारे डिजाइनर ने एक अद्भुत काम करने के बाद, साइट पर विचार करने और ड्राइंग करने के लिए, हम, डेवलपर्स, लेआउट को लागू करने के लिए आवश्यक, इसे साफ रखने और प्रत्येक डिवाइस के लिए पूरा करने के लिए, बड़े 2K स्क्रीन से, जिस पर हम पुराने iPhone 4 के साथ कोड लिखते हैं 3.5 इंच का डिस्प्ले।

कुछ हफ्तों बाद, वेबसाइट लगभग तैयार हो गई थी और मैंने इसके माध्यम से यह सुनिश्चित करने के लिए देखा कि सब कुछ उसी तरह काम कर रहा है जैसा कि इसे करना चाहिए। यह देखते हुए कि मुख्य पृष्ठ का लेआउट हमारे iPad पर सही ढंग से प्रदर्शित नहीं किया गया था, मैंने जल्दी से कुछ CSS नियमों को बदल दिया और त्रुटि को ठीक कर दिया, लेकिन ... इसके कारण छोटे लैपटॉप के साथ सभी लैपटॉप पर लेआउट प्रदर्शित करने में समस्याएँ हुईं

---

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

वास्तव में, इससे पहले कि मैं मूल रूप से अधिकतम-चौड़ाई और न्यूनतम-चौड़ाई का उपयोग करके लेआउट को उत्तरदायी बनाने के लिए सीएसएस मीडिया अभिव्यक्तियों का उपयोग करता था।

अब मुझे पता चला है कि सीएसएस मीडिया के भाव केवल अधिकतम-चौड़ाई नहीं हैं, बल्कि कई अलग-अलग मूल्य हैं। और उनमें से कुछ वास्तव में रोजमर्रा की जिंदगी में उपयोगी हो सकते हैं।

तो यह मीडिया अभिव्यक्ति क्या है जिसके बारे में मैं बात कर रहा हूं? आपने कुछ के बारे में सुना होगा। लेकिन मैंने कई नए लोगों पर भी प्रकाश डाला, जिनका उपयोग बहुत उपयोगी हो सकता है

व्यूपोर्ट का आकार

हां, मैं चौड़ाई, ऊंचाई, न्यूनतम चौड़ाई, न्यूनतम ऊंचाई, अधिकतम चौड़ाई और अधिकतम ऊंचाई के बारे में बात कर रहा हूं।

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

चूंकि चौड़ाई और ऊंचाई के कार्य केवल दायरे के सटीक आकार के लिए शैलियों को निर्धारित कर सकते हैं, इसलिए यह अधिक संभावना है कि आप अधिकतम- और मिनट- उपसर्गों का उपयोग करेंगे। उदाहरण के लिए, निम्नलिखित कोड में, शैलियों को केवल तभी लागू किया जाएगा जब व्यूपोर्ट की ऊंचाई 320 पिक्सेल से अधिक हो।

/*   ,      320  */ body { background-color: #FFD23F; /*   */ } @media screen and (min-height: 320px) { body { background-color: #EE4266; /*   */ } } 

लेकिन आप कई प्रकार के आकारों को संभालने के लिए इन कार्यों को भी मिला सकते हैं

 /*   ,      320  600  */ body { background-color: #FFD23F; /*   */ } @media screen and (min-width: 320px) and (max-width: 600px) { body { background-color: #EE4266; /*   */ } } 

निम्न उदाहरण दर्शाता है कि गुंजाइश की चौड़ाई के आधार पर पृष्ठभूमि के रंग को बदलने के लिए अधिकतम-चौड़ाई फ़ंक्शन का उपयोग कैसे करें

 body { background-color: #0EAD69; } @media screen and (max-width: 1600px) { body { background-color: #3BCEAC; } } @media screen and (max-width: 1280px) { body { background-color: #FFD23F; } } @media screen and (max-width: 960px) { body { background-color: #EE4266; } } @media screen and (max-width: 600px) { body { background-color: #540D6E; } } 

स्क्रीन ओरिएंटेशन

ओरिएंटेशन एक अच्छा मीडिया फीचर है जो आपको डिस्प्ले के ओरिएंटेशन के आधार पर बदलाव करने की अनुमति देता है। इसके दो अर्थ हो सकते हैं: पोर्ट्रेट (चित्र) और लैंडस्केप (लैंडस्केप / एल्बम)।

लेकिन ब्राउज़र चित्र और परिदृश्य पर क्या विचार करता है? चित्र का मान हर बार उन परिवर्तनों को आरंभ करेगा जो दायरे की ऊंचाई चौड़ाई से अधिक है। इसी तरह, यदि चौड़ाई ऊंचाई से अधिक है, तो व्यूपोर्ट को "लैंडस्केप" माना जाएगा।

उदाहरण के लिए, यह कोड निम्नलिखित परिणाम देता है:

 /*    ,     */ body { background-color: #FFD23F; /*   */ } @media screen and (orientation: landscape) { body { background-color: #EE4266; /*   */ } } 

पहलू अनुपात

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

इस फ़ंक्शन में विभिन्न पहलुओं वाले अनुपात के साथ स्क्रीन की एक श्रृंखला को संसाधित करने के लिए अधिकतम और न्यूनतम उपसर्ग भी हो सकते हैं।

मार्गदर्शन और सूचक

इसलिए, मैं इन मीडिया फ़ंक्शंस को यथासंभव सरल रूप से समझाने की कोशिश करूंगा, क्योंकि वे काफी उपयोगी हैं।

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

अब, वे क्या करते हैं?

होवर (और कोई भी होवर ) फ़ंक्शन ब्राउज़र को यह पता लगाने की अनुमति देता है कि क्या मुख्य इनपुट तंत्र तत्वों पर मँडरा सकता है (उदाहरण के लिए, माउस कर्सर की तरह)।

आप इस फ़ंक्शन का उपयोग मुख्य इनपुट तंत्र को निर्धारित करने के लिए कर सकते हैं

• होवर: होवर , तत्वों पर होवर कर सकता है
• मंडराना: कोई नहीं , तत्वों पर मँडरा नहीं किया जा सकता है या कोई भी मंडराना इनपुट तंत्र नहीं है
  

यह कब उपयोग करने लायक है? उदाहरण के लिए, जब आप मोबाइल उपकरणों पर होवर ऐनिमेशन को संसाधित करना चाहते हैं, जहां इनपुट तंत्र (उंगली) तत्वों पर मँडरा नहीं सकता है।

पॉइंटर (और कोई-पॉइंटर ) फ़ंक्शन ब्राउज़र को यह बताने देता है कि क्या मुख्य इनपुट तंत्र में एक पॉइंटर (उदाहरण के लिए, एक माउस) है, और यदि हां, तो यह कितना सही है।

आप इस फ़ंक्शन का उपयोग मुख्य इनपुट तंत्र को निर्धारित करने के लिए कर सकते हैं, जो:

• सूचक: मोटे , सूचक सीमित परिशुद्धता शामिल हैं
• सूचक: ठीक है , एक सटीक सूचक भी शामिल है
• सूचक: कोई नहीं , एक सूचक शामिल नहीं है

यह उपयोगी है, उदाहरण के लिए, एक गलत संकेतक के साथ उपकरणों पर दबाव के क्षेत्र को बढ़ाने के लिए।


अरे, यह सब उबाऊ है। पहले बताई गई शांत नई सुविधाएँ कहाँ हैं?

यहाँ वे हैं!

कृपया ध्यान दें कि निम्नलिखित कार्य प्रयोगात्मक हैं और वर्तमान में बहुत सीमित समर्थन है।

उलटे रंग

उल्टे रंग सुविधा बहुत उपयोगी है अगर आपको सिस्टम शैलियों के समान सेटिंग होने पर कुछ शैलियों को लागू करने की आवश्यकता होती है।

सिस्टम रंग उलटा क्यों सक्षम करें? यदि आप पठनीयता में सुधार करना चाहते हैं तो यह आमतौर पर बहुत उपयोगी है।

यह भी ध्यान रखें कि रंगों को उल्टा करने पर फ़ॉन्ट को बढ़ाने और बोल्डनेस को कम करने के लिए एक और अच्छा अभ्यास है। यह वही है जो आप मीडिया के भावों के साथ कर सकते हैं।

इस फ़ंक्शन के केवल दो मूल्य हैं:

• उलटा : शैलियों को लागू करें यदि रंग उल्टे हैं
• कोई नहीं : डिफ़ॉल्ट शैली लागू करें

यहाँ एक उदाहरण है! जब रंग उल्टे होते हैं, तो पाठ का आकार बढ़ जाता है

 .text { font-size: 24px; } @media screen and (inverted-colors: inverted) { .text { font-size: 36px; } } 

कृपया ध्यान दें कि यह सुविधा वर्तमान में केवल Safari (macOS और iOS पर) पर समर्थित है। हमेशा समर्थित ब्राउज़र की अद्यतित सूची यहां पाई जा सकती है।

पसंदीदा रंग योजना

यह मेरी पसंदीदा विशेषताओं में से एक है, और मुझे उम्मीद है कि यह धीरे-धीरे लोकप्रिय हो जाएगी।

फ़ंक्शन डेवलपर्स को तत्वों के लिए अलग-अलग डिज़ाइन विकल्प सेट करने की अनुमति देता है यदि रंग योजना बदल जाती है। विंडोज और मैकओएस दोनों उपयोगकर्ताओं को सिस्टम रंग योजना को प्रकाश से अंधेरे में बदलने और इसके विपरीत करने की अनुमति देते हैं। iOS 13 ने भी इस सुविधा को पेश किया, और Android उपयोगकर्ताओं के लिए, यह सुविधा Android Q के आगमन के साथ उपलब्ध होगी।

ब्राउज़र समर्थन भी सभ्य है। Google Chrome, मोज़िला फ़ायरफ़ॉक्स और सफारी के नवीनतम संस्करण वर्तमान में इस सुविधा का समर्थन करते हैं। मोबाइल उपकरणों पर, यह ओपेरा को छोड़कर सभी प्रमुख ब्राउज़रों द्वारा समर्थित है। हमेशा समर्थित ब्राउज़र की अद्यतित सूची यहां पाई जा सकती है।

इस फ़ंक्शन के लिए मान काफी सहज हैं:

• प्रकाश : शैलियों को लागू करें यदि उपयोगकर्ता प्रकाश विषय को प्राथमिकता देता है
• डार्क : यदि उपयोगकर्ता किसी डार्क थीम को पसंद करते हैं तो स्टाइल लागू करें
• कोई प्राथमिकता नहीं : डिफ़ॉल्ट शैली लागू करें
  

नीचे दिए गए उदाहरण में देखें कि यह सुविधा कितनी शांत है!

 .appbar { background-color: #EE4266; } .fab { background-color: #424242; } @media screen and (prefers-color-scheme: dark) { body { background-color: #424242; } .appbar { background-color: #212121; } h2 { color: #fff; } .fab { background-color: #EE4266; } } 

सिस्टम डार्क थीम सेट करने से पेज भी डार्क हो जाता है

एनीमेशन कम करें

यह भी बहुत महत्वपूर्ण है। व्यक्तिगत रूप से, मुझे एनिमेशन और संक्रमण पसंद हैं, और मुझे लगता है कि सही एनीमेशन वास्तव में साइट की उपयोगिता में सुधार कर सकते हैं। लेकिन हर कोई एनिमेशन पसंद नहीं करता है और इससे भी महत्वपूर्ण बात यह है कि कुछ लोगों को वेस्टिबुलर विकार हो सकते हैं जो गति बीमारी और चक्कर का कारण बन सकते हैं। मुझे एक उपयोगी लेख मिला जो इस तरह की घटनाओं को बहुत अच्छी तरह से समझाता है।

सामान्य तौर पर, सबसे महत्वपूर्ण डेस्कटॉप और मोबाइल ऑपरेटिंग सिस्टम पर, एक एक्सेसिबिलिटी विकल्प होता है जो आपको तत्वों की गतिशीलता को कम करके इन समस्याओं को हल करने की अनुमति देता है।

इस फ़ंक्शन के दो अर्थ हो सकते हैं:

• कम करें : शैलियों को लागू करता है यदि उपयोगकर्ता एनिमेशन और बदलाव नहीं देखना चाहता है। यह मान आमतौर पर उन्हें अक्षम करने के लिए उपयोग किया जाता है।
• नो-प्रिफरेंस : नियमित स्टाइल लागू करता है

नीचे दिए गए उदाहरण में इस सुविधा को देखें:

 .pulse { animation: pulse 2s infinite; } @media screen and (prefers-reduced-motion: reduce) { .pulse { animation: none; } } 

जब उपयोगकर्ता तत्वों की गतिशीलता को कम करता है, तो रिपल एनीमेशन बंद हो जाता है

इस सुविधा के लिए ब्राउज़र अनुकूलता बहुत अच्छी है। फिलहाल, केवल एज और IE इसका समर्थन नहीं करते हैं। हमेशा समर्थित ब्राउज़र की अप-टू-डेट सूची यहां पाई जा सकती है।

निष्कर्ष

यह मेरे लिए एक दिलचस्प प्रयोग था, मैंने कुछ नई विशेषताओं के बारे में सीखा जो मैं अब अधिक बार उपयोग करूंगा।

मैं कुछ और कार्यों का उल्लेख करना चाहूंगा, जैसे कि प्रकाश-स्तर , जिसका उपयोग परिवेश प्रकाश के स्तर की जांच करने के लिए किया जा सकता है, लेकिन हाल ही में पेश किए गए अधिकांश मीडिया अभिव्यक्ति कार्यों में अभी भी किसी भी ब्राउज़र का समर्थन नहीं है, इसलिए ... समय अभी तक नहीं आया है।

कोड उदाहरण
आप यहां कोड उदाहरण पढ़ सकते हैं। कोड सार्वजनिक रूप से Github पर उपलब्ध है ।

हम कौन हैं?
हम पाडोवा, इटली में स्थित युवा डेवलपर्स और डिजाइनरों की एक टीम हैं। हम मोबाइल एप्लिकेशन और वेबसाइट विकसित करते हैं और हमेशा कुछ शानदार बनाने के लिए तैयार रहते हैं।