: फोकस-दृश्य - सीएसएस-ट्रिक्स

:focus-visibleछद्म वर्ग (भी "फोकस-संकेत" छद्म वर्ग के रूप में जाना जाता है) शैली तत्वों है कि करने के लिए एक देशी सीएसएस तरीका है:

में हैं फोकस
फ़ोकस दिखाने के लिए एक दृश्यमान संकेतक की आवश्यकता है (बाद में इस पर अधिक)

:focus-visibleका उपयोग इसी तरह किया जाता है :focus: उस तत्व पर ध्यान केंद्रित करने के लिए जिस पर वर्तमान में फोकस है।

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visibleCSS4 चयनकर्ताओं के मसौदे का हिस्सा है। गोद लेने से पहले, मोज़िला ने :-moz-focusringऔपचारिक विनिर्देश से आगे फ़ायरफ़ॉक्स में कार्यक्षमता लाने के लिए छद्म वर्ग की शुरुआत की ।

हमें आवश्यकता क्यों है: फ़ोकस-दृश्य?

:focusयह पहले से ही नहीं है? हां, लेकिन समस्याएं हैं। सबसे स्पष्ट चित्रण एक बटन है जो कुछ जावास्क्रिप्ट को आग लगाता है। छवियों के बीच स्वैप करने के लिए बटन के साथ एक छवि हिंडोला की कल्पना करें। मान लीजिए कि आपने tabindexबटनों में एक जोड़ दिया है, ताकि वे एक कीबोर्ड के साथ चुने जा सकें, लेकिन जब आप अपने माउस के साथ हिंडोला का परीक्षण करने जाते हैं, तो आप अपने भव्य बटन के चारों ओर इस रूपरेखा को देखते हैं:

ब्राउज़र द्वारा उल्लिखित रूपरेखा `:focus`

ऐसा नहीं है कि आप ऐसा करना चाहते हैं (पहुंच संबंधी चिंताओं के लिए), लेकिन आप इससे कैसे छुटकारा पाते हैं? :focusछद्म वर्ग सेट करके :

.next-image-button:focus ( outline: none; )

अब आपका बटन बहुत अच्छा लगता है जब वह फोकस में होता है, लेकिन तब क्या होता है जब कोई उपयोगकर्ता माउस के बिना आपके बटन पर टैब करता है? वे नहीं देख सकते हैं कि वे कहाँ पर वर्जित हैं! यह एक समस्या है क्योंकि अब यह बताने का कोई तरीका नहीं है कि कीबोर्ड क्रियाओं के लिए कौन सा बटन केंद्रित है:

इनमें से एक ध्यान केंद्रित है, लेकिन आप इसे देख नहीं सकते हैं!

क्या ब्लू फ़ोकस रूपरेखा को हटाने का एक तरीका है लेकिन फिर भी एक फ़ोकस दिखाते हैं जो साइट डिज़ाइन के अनुरूप है? ज़रूर, आप अपना केक ले सकते हैं और इसे भी खा सकते हैं, धन्यवाद :focus-visible!

:focus-visibleकेवल तब लागू होता है जब आप वास्तव में उपयोगकर्ता को यह देखने में मदद करने के लिए एक दृश्य संकेतक चाहते हैं कि फोकस कहां है। दूसरे शब्दों में, यह आउटलाइन को कैन की तरह छिपा नहीं :focusसकता है। (ठीक है, यह इसे डिजाइन में सम्मिश्रण कर सकता है, लेकिन जो भी हो।) दोनों को उस अर्थ में एक साथ उपयोग करना होगा। चलो हमारे बटन में एक जोड़ें:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

अब, जब कीबोर्ड का उपयोग बटन को टैब करने के लिए किया जाता है, तो फोकस का एक दृश्य संकेत होगा:

जब कुछ होता है तो ब्राउज़र कैसे निर्धारित करते हैं: फ़ोकस-दृश्य?

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

यदि किसी उपयोगकर्ता ने हमेशा एक दृश्य फ़ोकस संकेतक देखने के लिए वरीयता (जैसे सिस्टम वरीयता या ब्राउज़र सेटिंग के माध्यम से) व्यक्त की है, तो उपयोगकर्ता एजेंट को इस बात का सम्मान करना चाहिए: फ़ोकस-दृश्य हमेशा सक्रिय तत्व पर मेल खाता है, किसी अन्य की परवाह किए बिना। कारक। (लेखक शैलियों की परवाह किए बिना उपयोगकर्ता का अपना फ़ोकस इंडिकेटर दिखाने के लिए एक अन्य विकल्प हो सकता है।)

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

यदि उपयोगकर्ता कीबोर्ड के माध्यम से पृष्ठ के साथ इंटरैक्ट करता है, तो वर्तमान में केंद्रित तत्व का मिलान होना चाहिए: फ़ोकस-विज़िबल (यानी कीबोर्ड का उपयोग बदल सकता है, भले ही यह छद्म श्रेणी मेल खाता हो, भले ही वह प्रभावित न हो: फोकस)।

यदि उपयोगकर्ता पृष्ठ के साथ एक पॉइंटिंग डिवाइस के माध्यम से इंटरैक्ट करता है, जैसे कि फोकस को नए तत्व में ले जाया जाता है जो उपयोगकर्ता इनपुट का समर्थन नहीं करता है, तो नए केंद्रित तत्व का मिलान नहीं होना चाहिए: फोकस-दृश्य।

यदि सक्रिय तत्व मेल खाता है: फोकस-दृश्यमान, और एक स्क्रिप्ट के कारण फोकस कहीं और स्थानांतरित होता है, तो नए केंद्रित तत्व का मिलान होना चाहिए: फोकस-दृश्य।

इसके विपरीत, यदि सक्रिय तत्व मेल नहीं खाता है: फ़ोकस-दृश्य, और एक स्क्रिप्ट के कारण फ़ोकस कहीं और स्थानांतरित होता है, तो नए फ़ोकस तत्व का मिलान नहीं होना चाहिए: फ़ोकस-दृश्य।

यदि यह थोड़ा सार है, तो यहाँ एक व्याख्या है:

परिस्थिति	क्या: फ़ोकस-दृश्य लागू होता है?
उपयोगकर्ता का कहना है कि वे हमेशा चाहते हैं कि फोकस एक सेटिंग के माध्यम से दिखाई दे	हाँ
एक तत्व को कार्य करने के लिए एक कीबोर्ड की आवश्यकता होती है (जैसे पाठ)	हाँ
उपयोगकर्ता एक कीबोर्ड के साथ नेविगेट कर रहा है	हाँ
उपयोगकर्ता एक पॉइंटिंग डिवाइस के साथ नेविगेट कर रहा है (जैसे कि टचस्क्रीन पर माउस या उंगली)	नहीं न
एक स्क्रिप्ट एक `:focus-visible`तत्व से दूसरे तत्व पर जाने के लिए फ़ोकस का कारण बनती है	हाँ
एक स्क्रिप्ट एक गैर- `:focus-visible`तत्व से दूसरे तत्व तक ले जाने के लिए फोकस का कारण बनती है	नहीं न

यह दोहराता है: ये दिशा-निर्देश हैं, और ब्राउज़र इसके द्वारा क्या चुना जाता है, इसके बारे में अपना निर्धारण करने में सक्षम होंगे :focus-visible। हम उम्मीद कर सकते हैं कि कीबोर्ड नेविगेशन के स्पष्ट मामले को एक पूर्वानुमानित तरीके से नियंत्रित किया जाएगा, लेकिन ब्राउज़र में किसी अन्य सुविधा की तरह, खुद को दृढ़ संकल्प बनाने की क्षमता है।