CodePen

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

إدراج عنصر في ترتيب علامات التبويب

أدخِل عنصرًا في ترتيب علامات التبويب الطبيعي باستخدام 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، ستبقى في ترتيب علامات التبويب. لإزالة عنصر وجميع عناصره الفرعية من ترتيب علامات التبويب، ننصحك باستخدام inert polyfill من WICG. تحاكي تقنية polyfill سلوك سمة inert المقترَحة، التي تمنع التكنولوجيات المساعِدة من اختيار العناصر أو قراءتها.

بدء العمل

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

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

يُرجى ملاحظة استخدام steps(var(--count)) للحصول على التأثير الصحيح ✨