CodePen

Wstaw element w kolejności tabulacji

Wstaw element w naturalnej kolejności kart za pomocą funkcji tabindex="0". Na przykład:

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

Aby zaznaczyć element, naciśnij klawisz Tab lub wywołaj jego metodę focus().

Usuwanie elementu z kolejności kart

Usuń element za pomocą funkcji tabindex="-1". Na przykład:

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

Spowoduje to usunięcie elementu z naturalnej kolejności kart, ale jego koncentracja nadal może być możliwa, wywołując metodę focus().

Pamiętaj, że zastosowanie tabindex="-1" do elementu podrzędnego nie ma wpływu na jego elementy podrzędne. Jeśli same elementy znajdują się w kolejności kart lub z powodu wartości tabindex, pozostaną w kolejności kart. Aby usunąć element i wszystkie jego elementy podrzędne z kolejności zakładek, rozważ użycie kodu polyfill inert w WICG. Polyfill emuluje zachowanie proponowanego atrybutu inert, co uniemożliwia wybieranie i odczytywanie elementów przez technologie wspomagające.

Zacznij działać

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

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

Pamiętaj, aby użyć funkcji steps(var(--count)), aby uzyskać odpowiedni efekt ✨