CodePen

Sekme sırasına öğe ekleme

tabindex="0" simgesini kullanarak doğal sekme sırasına bir öğe ekleyin. Örneğin:

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

Bir öğeye odaklanmak için Tab tuşuna basın veya öğenin focus() yöntemini çağırın.

Bir öğeyi sekme sırasından kaldırma

tabindex="-1" simgesini kullanarak bir öğeyi kaldırın. Örneğin:

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

Bu işlem, bir öğeyi doğal sekme sırasından kaldırır ancak öğe, focus() yöntemi çağrılarak yine de odaklanılabilir.

Bir öğeye tabindex="-1" uygulanmasının alt öğelerini etkilemediğini unutmayın. Alt öğeler, sekme sırasına doğal olarak veya bir tabindex değeri nedeniyle eklendiyse sekme sırasında kalır. Bir öğeyi ve tüm alt öğelerini sekme sırasından kaldırmak için WICG'nin inert polyfill'ini kullanabilirsiniz. Bu polyfill, önerilen bir inert özelliğinin davranışını taklit eder. Bu özellik, öğelerin yardımcı teknolojiler tarafından seçilmesini veya okunmasını engeller.

İşleri hızlandırın.

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

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

Doğru efekti elde etmek için steps(var(--count)) simgesinin kullanıldığını unutmayın ✨