स्टाइल फ़ोकस

Rob Dodson

फ़ोकस इंडिकेटर (जिसे अक्सर "फ़ोकस रिंग" से दिखाया जाता है) अपने पेज के किसी खास एलिमेंट को चुनें. माउस का इस्तेमाल न कर पाने वाले उपयोगकर्ताओं के लिए यह बहुत ज़्यादा महत्वपूर्ण है, क्योंकि यह माउस-पॉइंटर.

यदि ब्राउज़र का डिफ़ॉल्ट फ़ोकस सूचक आपके डिज़ाइन से मेल नहीं खाता है, तो सीएसएस को चुनें. बस अपने कीबोर्ड इस्तेमाल करने वालों को ध्यान में रखना न भूलें!

फ़ोकस इंडिकेटर दिखाने के लिए, :focus का इस्तेमाल करें

:focus जब भी किसी एलिमेंट पर फ़ोकस किया गया हो, तब pseudo-class को लागू किया जाता है. भले ही, उसका इनपुट कुछ भी हो डिवाइस (माउस, कीबोर्ड, स्टाइलस वगैरह) या उस पर फ़ोकस करने के लिए इस्तेमाल किया जाने वाला तरीका. उदाहरण के लिए, नीचे दिए गए <div> में tabindex है, जिससे फ़ोकस किया जा सकता है. इसमें यह भी है :focus स्थिति के लिए पसंद के मुताबिक स्टाइल:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

चाहे आप उस पर क्लिक करने के लिए माउस का इस्तेमाल करें या उस पर टैब करने के लिए कीबोर्ड का, <div> हमेशा एक जैसा दिखेगा.

माफ़ करें, ब्राउज़र पर फ़ोकस लागू करने के तरीके में फ़र्क़ हो सकता है. या किसी भी एलिमेंट पर फ़ोकस नहीं होता है, तो हो सकता है कि ब्राउज़र और सिस्टम.

उदाहरण के लिए, नीचे दिए गए <button> में भी इसके :focus के लिए पसंद के मुताबिक स्टाइल है राज्य.

button:focus {
  outline: 4px dashed orange;
}

अगर macOS पर Chrome में माउस से <button> पर क्लिक किया जाता है, तो आपको अपनी पसंद के हिसाब से फ़ोकस करने के लिए डिज़ाइन किया गया है. हालांकि, आपको अपने हिसाब से फ़ोकस करने की स्टाइल नहीं दिखेगी, अगर macOS पर Safari में <button> पर क्लिक करें. ऐसा इसलिए होता है, क्योंकि Safari एलिमेंट पर क्लिक करने पर, उसे फ़ोकस नहीं मिलता.

फ़ोकस का व्यवहार अलग-अलग होता है, इसलिए इसे टेस्ट करने की ज़रूरत पड़ सकती है अलग-अलग डिवाइस का इस्तेमाल कर सकते हैं, ताकि यह पक्का किया जा सके कि आपकी फ़ोकस स्टाइल आपके उपयोगकर्ताओं के लिए सही हैं.

फ़ोकस इंडिकेटर को चुनने के लिए, :focus-visible का इस्तेमाल करें

नया :focus-visible pseudo-class को तब लागू किया जाता है, जब किसी एलिमेंट को फ़ोकस मिलता है और ब्राउज़र अपने अनुभव के आधार पर यह तय करता है कि फ़ोकस इंडिकेटर को दिखाने का तरीका क्या होगा उपयोगकर्ता के लिए फ़ायदेमंद हो. खास तौर पर, अगर हाल ही में उपयोगकर्ता के इंटरैक्शन से कीबोर्ड के ज़रिए किया गया था और बटन को दबाने पर मेटा, ALT / OPTION, या CONTROL बटन दबाएं, तो :focus-visible मेल खाएगा.

नीचे दिए गए उदाहरण में दिया गया बटन चुनिंदा फ़ोकस इंडिकेटर दिखाएगा. अगर आपने तो माउस से क्लिक करने पर नतीजे, पहली बार इस्तेमाल करने पर मिलने वाले नतीजे से अलग होते हैं तो उस पर टैप करें.

button:focus-visible {
  outline: 4px dashed orange;
}

फ़ोकस किए गए एलिमेंट के पैरंट को स्टाइल देने के लिए :focus-within का इस्तेमाल करें

कॉन्टेंट बनाने :focus-within pseudo-class को एलिमेंट पर तब लागू किया जाता है, जब एलिमेंट को खुद को फ़ोकस हो सकता है या जब उस एलिमेंट के अंदर मौजूद किसी दूसरे एलिमेंट पर फ़ोकस होता है.

इसका इस्तेमाल पेज के किसी हिस्से को हाइलाइट करने के लिए किया जा सकता है. ध्यान दिया जाता है. उदाहरण के लिए, नीचे दिए गए फ़ॉर्म में फ़ोकस, दोनों पर फ़ोकस होता है फ़ॉर्म को चुने जाने पर और तब भी, जब फ़ॉर्म का कोई रेडियो बटन चुना गया.

form:focus-within {
  background: #ffecb3;
}

फ़ोकस इंडिकेटर कब दिखाएं

बुनियादी नियम यह है कि आप खुद से पूछें, "अगर आपने इस कंट्रोल पर क्लिक किया है, तो मोबाइल डिवाइस का इस्तेमाल करते हुए, क्या आपको उस डिवाइस में कीबोर्ड दिखने की उम्मीद है?"

अगर जवाब "हां" है, तो तो कंट्रोल को शायद हमेशा फ़ोकस दिखाना चाहिए से पता चलता है कि इस पर फ़ोकस करने के लिए किस इनपुट डिवाइस का इस्तेमाल किया गया है. एक अच्छा उदाहरण है <input type="text"> एलिमेंट. उपयोगकर्ता को कीबोर्ड के ज़रिए एलिमेंट फ़ोकस बनाए रखें, इसलिए फ़ोकस इंंडिकेटर दिखाना हमेशा मददगार साबित होता है.

अगर जवाब "नहीं" है, तो कंट्रोल चुना जा सकता है कि फ़ोकस इंडिकेटर. <button> एलिमेंट एक अच्छा उदाहरण है. अगर कोई उपयोगकर्ता किसी जैसे कि माउस या टच स्क्रीन, कार्रवाई पूरी हो गई हो, और फ़ोकस इंडिकेटर ज़रूरी हो. हालांकि, अगर उपयोगकर्ता कीबोर्ड से नेविगेट कर रहा है, तो यह काम का है फ़ोकस इंडिकेटर दिखाने के लिए, ताकि उपयोगकर्ता यह तय कर सकें कि उन्हें ENTER या SPACE कुंजियों का इस्तेमाल करके कंट्रोल पर क्लिक करें.

outline: none से बचें

सच कहूँ, तो जिस तरीके से ब्राउज़र यह तय करते हैं कि फ़ोकस संकेतक कब बनाना है, वह बहुत उलझन पैदा करने वाला होता है. सीएसएस का इस्तेमाल करके, <button> एलिमेंट का रंग-रूप बदलना या tabindex एलिमेंट से ब्राउज़र का डिफ़ॉल्ट फ़ोकस रिंग व्यवहार यह होगा लात मारना.

एक आम एंटी-पैटर्न, सीएसएस का इस्तेमाल करके फ़ोकस इंडिकेटर को हटा देता है. जैसे:

/* Don't do this!!! */
:focus {
  outline: none;
}

इस समस्या को हल करने का एक बेहतर तरीका यह है कि आप :focus और :focus-visible पॉलीफ़िल. नीचे दिए गए कोड के पहले ब्लॉक में बताया गया है कि पॉलीफ़िल काम करता है और इसके नीचे मौजूद सैंपल ऐप्लिकेशन, पॉलीफ़िल का इस्तेमाल करके, बटन पर फ़ोकस इंडिकेटर को बदलें.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  …
}