CodePen

टैब के क्रम में कोई एलिमेंट डालें

tabindex="0" का इस्तेमाल करके प्राकृतिक टैब में कोई एलिमेंट डालें. उदाहरण के लिए:

<div tabindex="0">Focus me with the TAB key</div>

किसी एलिमेंट पर फ़ोकस करने के लिए, Tab बटन दबाएं या एलिमेंट के focus() तरीके को कॉल करें.

टैब के क्रम से कोई एलिमेंट हटाना

tabindex="-1" का इस्तेमाल करके, किसी एलिमेंट को हटाएं. उदाहरण के लिए:

<button tabindex="-1">Can't reach me with the TAB key!</button>

इससे किसी एलिमेंट को स्वाभाविक टैब क्रम से हटा दिया जाता है, लेकिन एलिमेंट के focus() तरीके को कॉल करके उस पर अब भी फ़ोकस किया जा सकता है.

ध्यान दें कि किसी एलिमेंट पर tabindex="-1" लागू करने से उसके चाइल्ड पर कोई असर नहीं पड़ता. अगर वे किसी टैब में सामान्य तौर पर या tabindex वैल्यू की वजह से लागू होते हैं, तो वे टैब के क्रम में बने रहेंगे. टैब के क्रम से किसी एलिमेंट और उसके सभी चिल्ड्रन को हटाने के लिए, WICG की inert पॉलीफ़िल का इस्तेमाल करें. पॉलीफ़िल, प्रस्तावित inert एट्रिब्यूट के व्यवहार को एम्युलेट करता है. यह एलिमेंट को सहायक टेक्नोलॉजी की मदद से, एलिमेंट को चुनने या पढ़ने से रोकता है.

इसे आज़माएं!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

बेहतर इफ़ेक्ट पाने के लिए, steps(var(--count)) के इस्तेमाल पर ध्यान दें ✨