CodePen

bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Wstawianie elementu do kolejności kart

Wstawianie elementu w naturalnej kolejności kart za pomocą tabindex="0". Na przykład:

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

Aby ustawić element w centrum uwagi, naciśnij klawisz Tab lub wywołaj metodę focus() elementu.

Usuwanie elementu z kolejności kart

Usuń element, używając 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 nadal będzie można go ustawić jako aktywny, wywołując metodę focus().

Pamiętaj, że zastosowanie wartości tabindex="-1" do elementu nie ma wpływu na jego elementy podrzędne. Jeśli znajdują się one w kolejności elementów domyślnie lub z powodu wartości tabindex, pozostaną w tej kolejności. Aby usunąć element i wszystkie jego elementy podrzędne z kolejności kart, użyj polyfilla inertWICG. Rozszerzenie emuluje działanie proponowanego atrybutu inert, który uniemożliwia wybór elementów lub ich odczyt przez technologie wspomagające.

Zacznijcie działać!

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

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

Zwróć uwagę na użycie steps(var(--count)), aby uzyskać odpowiedni efekt ✨