आधुनिक ब्राउज़रों में कीबोर्ड-केवल फोकस शैलियाँ

आधुनिक ब्राउज़रों में, :फोकस-दृश्यमान छद्म वर्ग का उपयोग कीबोर्ड प्राप्त करने के लिए किया जा सकता है- केवल फोकस शैलियाँ। जब उपयोगकर्ता कीबोर्ड या अन्य गैर-पॉइंटिंग डिवाइस के माध्यम से पृष्ठ के साथ इंटरैक्ट करता है तो यह छद्म वर्ग केंद्रित तत्वों से मेल खाता है, जब यह उपयोगकर्ता की सहायता करता है तो फोकस का संकेत देता है। परिणामस्वरूप, जब कोई उपयोगकर्ता क्लिक या टैपिंग के माध्यम से इंटरैक्ट करता है तो फोकस रिंग दब जाती हैं। पुराने ब्राउज़रों के साथ संगतता, इस दृष्टिकोण का पालन करें:

बटन:फोकस { /* डिफ़ॉल्ट फोकस शैलियाँ */ } बटन: फोकस: नहीं (: फोकस-दृश्यमान) { /* डिफ़ॉल्ट फोकस शैलियों को पूर्ववत करें */ }

इनब्राउज़र जो :focus-visible का समर्थन करते हैं, दूसरा नियम :focus-visible निष्क्रिय होने पर पहले नियम में परिभाषित फोकस शैलियों को ओवरराइड करता है। यह सुनिश्चित करता है कि फोकस शैलियाँ केवल तभी लागू होती हैं जब :focus-visible सक्रिय होता है।

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

उन ब्राउज़रों के लिए जो :focus-visible का समर्थन नहीं करते हैं, एक वैकल्पिक दृष्टिकोण में प्रत्येक फोकस करने योग्य तत्व के भीतर एक अतिरिक्त तत्व का उपयोग करना शामिल है, जैसा कि रोमन कोमारोव के लेख में प्रस्तावित है:

/* रूट बटन स्टाइल */ .बीटीएन { सभी: प्रारंभिक; प्रदर्शन: इनलाइन-ब्लॉक; } /*आंतरिक सामग्री तत्व*/ .btn__सामग्री { पृष्ठभूमि: नारंगी; कर्सर: सूचक; प्रदर्शन: इनलाइन-ब्लॉक; } /* आंतरिक तत्व पर कस्टम फोकस शैलियाँ */ .btn:फोकस > .btn__content { बॉक्स-छाया: 0 0 2px 2px #51a7e8; रंग: नींबू; }

फोकस शैलियों को आंतरिक तत्व पर रखकर, कस्टम फोकस शैली जोड़ने के बाद मूल और आंतरिक दोनों तत्वों पर डिफ़ॉल्ट रूपरेखा को हटाते हुए, केवल कीबोर्ड इंटरैक्शन प्राथमिक दृश्य तत्व पर फोकस शैलियों को लागू करते हैं।