🏊 💰 🧦 अलग-अलग स्थिति को इंगित करने, ध्यान केंद्रित करने और सक्रिय करने की शैली बनाएं। 🕞 🦌 🕴🏽

इन वर्षों में, मैंने तत्वों के राज्यों को स्टाइल किया है :hover :focus और :active उसी तरह :active । मुझे ठीक से याद नहीं है कि वास्तव में मैंने ऐसा कब शुरू किया था। लेकिन यह सबसे अच्छे दृष्टिकोण से दूर है। क्यों, मैं इस लेख में समझाने की कोशिश करूंगा।

यहां उस कोड का एक उदाहरण है जिसका मैंने हमेशा उपयोग किया था।

 .selector { &:hover, &:focus, &:active { ... } }

जब मैंने कीबोर्ड (विशेष रूप से फोकस की स्थिति) के साथ काम करते समय इंटरफ़ेस की पहुंच पर अधिक ध्यान देना शुरू किया, तो मैं इस निष्कर्ष पर पहुंचा कि हमें तत्वों के विभिन्न राज्यों को समान रूप से स्टाइल नहीं करना चाहिए।

मार्गदर्शन, फ़ोकस और सक्रिय स्थिति को अलग तरह से स्टाइल किया जाना चाहिए।

कारण सरल है: ये अलग-अलग स्थिति हैं!

आज मैं आपको बहुत प्रयास किए बिना सभी तीन राज्यों को व्यवस्थित करने का जादुई तरीका दिखाना चाहता हूं।

के साथ शुरू करते हैं :hover ।

होवर स्टाइलिंग: (होवर)

:hover जब माउस माउस कर्सर के साथ किसी तत्व पर :hover करता है तो :hover आग उगलता है।

आमतौर पर यह स्थिति background-color और / या पाठ color की पृष्ठभूमि को बदलने के लिए है। मतभेद स्पष्ट होने की आवश्यकता नहीं है, क्योंकि उपयोगकर्ता पहले से ही जानते हैं कि वे कुछ तत्व पर मंडराते हैं।

 button { background-color: #dedede; } button:hover { background-color: #aaa; }

स्टाइलिंग फ़ोकस (: फ़ोकस)

:focus जब कोई तत्व फ़ोकस प्राप्त करता है तो फ़ोकस फ़ोकस। यह दो तरह से हासिल किया जाता है:

टैब बटन के साथ एक आइटम का चयन करते समय
जब आप माउस के साथ किसी आइटम पर क्लिक करते हैं

फोकल तत्वों में शामिल हैं:

लिंक ( <a> )
बटन ( <button> )
फार्म तत्व ( <input> , <textarea> , आदि)
tabindex विशेषता वाले तत्व

ध्यान रखने योग्य कुछ महत्वपूर्ण बाते:

उपयोगकर्ता टैब बटन के साथ विशेषता tabindex="-1" साथ एक तत्व का चयन नहीं कर सकते हैं, लेकिन माउस के साथ उस पर क्लिक कर सकते हैं। क्लिक के कारण ध्यान केंद्रित होता है।
सफारी और फ़ायरफ़ॉक्स मैक ओएस ब्राउज़र पर, क्लिक करने से <button> तत्वों पर ध्यान केंद्रित नहीं होता है
जब आप <a> लिंक पर क्लिक करते हैं, तो माउस बटन दबाए जाने पर ध्यान उस पर रहता है। जब आप बटन को छोड़ते हैं, तो ध्यान दूसरी जगह पर भेज दिया जाता है यदि उसी पृष्ठ पर मौजूद id को href विशेषता में निर्दिष्ट किया गया हो

फ़ोकस स्थिति को स्टाइल करके, हम कीबोर्ड इंटरफ़ेस के साथ काम करने वाले उपयोगकर्ताओं के बारे में अधिक ध्यान रखते हैं, जो माउस का उपयोग करते हैं।

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

ज्यादातर मामलों में, डिफ़ॉल्ट रूप से फोकस डिज़ाइन ठीक है। यदि आप इसे अपने तरीके से स्टाइल करना चाहते हैं, तो इन चार बिंदुओं को याद रखें:

एक स्ट्रोक जोड़ना
एनिमेशन बनाएं
background-color बदलें
color बदलना

चूंकि background-color और color गुणों को बदलने के साथ अक्सर किया जाता है :hover , यह एक स्ट्रोक या एनीमेशन का उपयोग करते हुए :focus स्थिति को व्यवस्थित करने के लिए समझ में आता है।

आप दिलचस्प फोकस शैली बनाने के लिए outline , border और box-shadow गुणों के संयोजन का उपयोग कर सकते हैं। यह कैसे करना है, मैंने लेख " एक कस्टम फोकस शैली बनाना " में वर्णित किया।

 button { background-color: #dedede; } button:hover { background-color: #aaa; } button:focus { outline: none; box-shadow: 0 0 0 3px lightskyblue; }

सक्रिय अवस्था का स्थिरीकरण: (सक्रिय)

वास्तविक जीवन में किसी चीज़ के साथ बातचीत करते समय, आप एक तरह की प्रतिक्रिया की उम्मीद करते हैं। उदाहरण के लिए, जब आप एक बटन दबाते हैं, तो आप इसे दबाए जाने की अपेक्षा करते हैं।

वेबसाइटों पर, यह प्रतिक्रिया भी उपयोगी है। आप :active साथ "बटन दबाने" के क्षण को स्टाइल कर सकते हैं। जब आप किसी तत्व के साथ बातचीत करते हैं तो इस अवस्था को कहा जाता है । इस मामले में, बातचीत का मतलब है:

एक तत्व पर बाएं माउस बटन को दबाए रखना (भले ही वह फोकस से बाहर हो)
स्पेसबार पकड़ें (बटन पर)

 button:active { background-color: #333; border-color: #333; color: #eee; }

नोट करने के लिए दो बिंदु:

एक स्थान रखने से राज्य का कारण बनता है :active बटन के लिए :active (<बटन>), लेकिन Enter धारण नहीं करता है
लॉन्च लिंक लिंक करें लेकिन सक्रिय स्थिति का कारण नहीं बनता है। स्पेसबार लिंक को बिल्कुल भी लॉन्च नहीं करता है

डिफ़ॉल्ट लिंक शैलियाँ

लिंक में डिफ़ॉल्ट रूप से सक्रिय स्टेट स्टाइल हैं। जब दबाया जाता है, तो वे लाल हो जाते हैं

सक्रिय और: फोकस के बीच संबंध

जब आप बाईं माउस बटन को केंद्रित तत्व पर रखते हैं, तो इसकी सक्रिय स्थिति को कहा जाता है। लेकिन साथ ही, फोकस स्टेट को भी कहा जाता है।

जब आप बाईं माउस बटन छोड़ते हैं, तो ध्यान तत्व पर रहता है।

यह लिंक और बटन को छोड़कर अधिकांश ध्यान देने योग्य तत्वों पर लागू होता है।

लिंक के लिए:

फ़ायरफ़ॉक्स और क्रोम में बाईं माउस बटन को दबाए रखने से राज्यों का कारण बनता है :active और :focus । सफारी में, केवल राज्य :active (केवल मैक ओएस पर परीक्षण किया गया)
यदि आप माउस बटन छोड़ते हैं :focus लिंक पर रहता है (यदि उसी पृष्ठ पर href विशेषता id लिंक नहीं होती है)। सफारी में, <body> ध्यान केंद्रित करें

बटन के लिए:

जब आप बाईं माउस बटन को पकड़ते हैं: दोनों स्थिति :active और :focus केवल क्रोम में कहा जाता है। राज्य :focus को सफारी और फ़ायरफ़ॉक्स (मैक) में बिल्कुल नहीं कहा जाता है। मैंने यहाँ इस विचित्र व्यवहार के बारे में लिखा।

यदि आप बटनों पर ध्यान केंद्रित करने के लिए क्लिक करना चाहते हैं, तो आपको इस जावास्क्रिप्ट को जल्द से जल्द जोड़ने की आवश्यकता है (इसके लिए जो आवश्यक है, आप लेख में पढ़ सकते हैं, जिस लिंक पर मैंने ऊपर संकेत दिया है)।

 document.addEventListener('click', event => { if (event.target.matches('button')) { event.target.focus() } })

इस कोड को जोड़ने से बटन व्यवहार निम्न में बदल जाएगा:

जब आप माउस बटन दबाए रखते हैं,: :active सभी ब्राउज़रों में कहा जाता है :focus केवल क्रोम में :focus
यदि आप माउस बटन छोड़ते हैं, तो यह कॉल करता है :focus सफारी और फ़ायरफ़ॉक्स (मैक ओएस) पर :focus करें। :focus सभी ब्राउज़रों में बटन पर :focus रहता है

जेएस कोड का एक टुकड़ा जोड़ने के बाद सफारी में बटन व्यवहार

अब जब आपको हॉवर, फ़ोकस और सक्रिय अवस्थाओं के बारे में आपकी ज़रूरत का सब कुछ पता है, तो मैं तीनों को स्टाइल करने के बारे में बात करना चाहता हूँ

जादू संयोजन

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

 .element:hover, .element:active { /*   / */ } .element:focus { /*   */ }

माउस उपयोगकर्ताओं के लिए:

जब उपयोगकर्ता किसी तत्व पर हो जाता है, तो background-color (और / या color ) बदल जाता है। एक प्रतिक्रिया है।
जब उपयोगकर्ता किसी तत्व पर क्लिक करता है, तो फ़ोकस की स्ट्रोक रूपरेखा प्रदर्शित होती है। एक प्रतिक्रिया है।

कीबोर्ड उपयोगकर्ताओं के लिए:

जब उपयोगकर्ता टैब बटन के साथ एक आइटम का चयन करता है, तो फोकस स्ट्रोक प्रदर्शित होता है। एक प्रतिक्रिया है।
जब वे एक तत्व के साथ बातचीत करते हैं, तो background-color (और / या color ) में परिवर्तन होता है। एक प्रतिक्रिया है।

दोनों दुनिया के सर्वश्रेष्ठ!

मैंने जादू संयोजन का ध्यान से परीक्षण नहीं किया है । यह इस अवधारणा अवधारणा के पक्ष में सिर्फ एक तर्क है। मैं आभारी रहूंगा यदि आप मुझे इसकी जांच करने में मदद करेंगे और मुझे संभावित समस्याओं के बारे में बताएंगे।
यदि आप जांच करेंगे, तो कोडपेन का उपयोग न करें । कोडपेन में लिंक के लिए फोकस स्थिति बहुत अजीब है। यदि आप किसी लिंक पर होवर करते हैं, तो फोकस स्ट्रोक हटा दिया जाता है। क्यों? मुझे नहीं पता कभी-कभी मुझे ऐसा लगता है कि अतिरिक्त उपकरणों के उपयोग के बिना ऐसी चीजों की जांच करना सबसे अच्छा है। बस पुराने पुराने HTML, CSS, JS।

नहीं एक जादुई (लेकिन शायद बेहतर भी) संयोजन

जैसा कि मैंने ऊपर उल्लेख किया है, बटन क्लिकों में मैक ओएस पर सफारी और फ़ायरफ़ॉक्स में अजीब व्यवहार होता है। यदि आपने ऊपर दिए गए जावास्क्रिप्ट कोड के स्निपेट को जोड़ा है, तो जादू संयोजन अभी भी काम करता है। लेकिन सही नहीं है।

यहाँ मैक ओएस पर सफारी और फ़ायरफ़ॉक्स पर क्या होता है:

जब उपयोगकर्ता माउस बटन को दबाए रखता है, तो कुछ भी नहीं बदलता है
जब उपयोगकर्ता बटन जारी करते हैं, तो आइटम फोकस प्राप्त करता है।

यदि आपको लगता है कि यह पर्याप्त है, तो जादू संयोजन काम करता है। आप वहीं रुक सकते हैं।

लेकिन अगर आपको लगता है कि यह व्यवहार पर्याप्त रूप से सुलभ नहीं है, तो आप राज्यों को अलग करना चाहते हैं :hover और :focus :active अलग से :active ।

 .element:hover { /*   / */ } .element:active { /*        */ } .element:focus { /*   */ }

सफारी में बटन व्यवहार यदि सभी तीन राज्यों को स्टाइल किया गया है

वह सब है! पढ़ने के लिए धन्यवाद और आशा है कि आपने आज कुछ नया सीखा है।

अलग-अलग स्थिति को इंगित करने, ध्यान केंद्रित करने और सक्रिय करने की शैली बनाएं।