Catégories
Astuces et Design

Affichage de l'étape actuelle avec des compteurs CSS

Disons que vous avez cinq boutons. Chaque bouton est une étape. Si vous cliquez sur le quatrième bouton, vous êtes à l'étape 4 sur 5 et vous souhaitez l'afficher.

Ce type de comptage et d'affichage peut être codé en dur, mais ce n'est pas amusant. JavaScript pourrait également faire ce travail. Mais CSS? Hmmmm. Peut-il? CSS a des compteurs, donc on peut certainement compter le nombre de boutons. Mais comment calculer uniquement jusqu'à un certain bouton? Il s'avère que cela peut être fait.

Merci à Jan Enning d'avoir envoyé un e-mail à propos de cette astuce, c'est très intelligent!

HTML

Ce n'est pas avoir être des boutons; il faut juste qu'il y en ait enfant de mêmes parents éléments que nous pouvons compter. Mais nous allons continuer et utiliser des boutons ici:

Le vide .message div, il y aura où nous produirons notre messagerie étape avec du contenu CSS.

CSS

L'astuce est que nous allons réellement utiliser Trois compteurs:

  1. Un compte total de tous les boutons
  2. Un décompte de l'étape en cours
  3. Décompte du nombre d'étapes restantes après l'étape en cours
.steps {
  counter-reset: 
    currentStep 0 
    remainder 0 
    totalStep 0;
}

Maintenant, faisons le décompte. Compter tous les boutons est simple:

button {
  counter-increment: totalStep;
}

Ensuite, nous avons besoin d'une autre chose pour compter qui comptera également les boutons. Nous pouvons utiliser un pseudo-élément dont le seul but est de compter les boutons:

button::before {
  content: "";
  counter-increment: currentStep;
}

L'astuce consiste à arrête de compter ce pseudo-élément sur tous les éléments après l'élément actif. Si nous utilisons un .active classe qui ressemble à ceci:

button.active ~ button::before {
  /* prevents currentStep from being incremented! */
  counter-increment: remainder;
}

Nous comptons le remainder là, ce qui pourrait aussi être utile, mais parce que nous sommes seulement incrémenter le reste, cela signifie que nous sommes ne pas compter le currentStep compteur. Fantaisie, fantaisie.

Ensuite, nous pouvons utiliser les compteurs pour sortir notre messagerie:

message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep);
}

C'est ici!

Il y a un peu de JavaScript pour que vous puissiez jouer en déplaçant l'état actif sur le bouton, mais le comptage et la messagerie sont entièrement CSS.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *