CodePen

bookmark_border Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Insérer un élément dans l'ordre des onglets

Insérez un élément dans l'ordre naturel des onglets à l'aide de tabindex="0". Exemple :

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

Pour sélectionner un élément, appuyez sur la touche Tab ou appelez la méthode focus() de l'élément.

Supprimer un élément de l'ordre des onglets

Supprimez un élément à l'aide de tabindex="-1". Exemple :

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

Cela supprime un élément de l'ordre naturel des onglets, mais l'élément peut toujours être sélectionné en appelant sa méthode focus().

Notez que l'application de tabindex="-1" à un élément n'a aucune incidence sur ses enfants. S'ils se trouvent dans l'ordre des onglets naturellement ou en raison d'une valeur tabindex, ils y resteront. Pour supprimer un élément et tous ses enfants de l'ordre des onglets, envisagez d'utiliser le polyfill inert de la WICG. Le polyfill émule le comportement d'un attribut inert proposé, ce qui empêche les éléments d'être sélectionnés ou lus par les technologies d'assistance.

Lancez-vous !

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

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

Notez l'utilisation de steps(var(--count)) pour obtenir l'effet souhaité. ✨