Anzeige des aktuellen Schritts mit CSS Zählern

Angenommen, Sie haben fünf Schaltflächen. Jede Schaltfläche ist ein Schritt. Wenn Sie auf die vierte Schaltfläche klicken, befinden Sie sich bei Schritt 4 von 5 und möchten dies anzeigen.

Diese Art von Zählung und Anzeige könnte hartkodiert sein, aber das macht keinen Spaß. JavaScript könnte diese Aufgabe ebenfalls erledigen. Aber CSS? Hmmmm. Kann es das? CSS hat Zähler, also können wir sicherlich die Anzahl der Buttons zählen. Aber wie berechnen wir nur bis zu einem bestimmten Button? Es stellt sich heraus, dass es gemacht werden kann.

HTML

Es müssen keine Buttons sein; es müssen nur Geschwisterelemente sein, die wir zählen können. Aber wir werden hier Buttons verwenden

<div class="steps">

  <button class="active">Shop</button>
  <button>Cart</button>
  <button>Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

  <div class="message"></div>

</div>

Das leere .message Div dort wird der Ort sein, an dem wir unsere Schritt-Nachrichten mit CSS-Inhalt ausgeben.

CSS

Der Trick ist, dass wir tatsächlich drei Zähler verwenden werden

1. Eine Gesamtzahl aller Buttons
2. Eine Zählung des aktuellen Schritts
3. Eine Zählung, wie viele Schritte nach dem aktuellen Schritt verbleiben

.steps {
  counter-reset: 
    currentStep 0 
    remainder 0 
    totalStep 0;
}

Jetzt machen wir die Zählung. Das Zählen aller Buttons ist unkompliziert

button {
  counter-increment: totalStep;
}

Als Nächstes brauchen wir etwas anderes zum Zählen, das auch die Buttons zählt. Wir können ein Pseudoelement verwenden, dessen einziger Zweck es ist, Buttons zu zählen

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

Der Trick ist, das Zählen dieses Pseudoelements für alle Elemente nach dem aktiven Element zu stoppen. Wenn wir eine .active Klasse verwenden, die so aussieht

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

Wir zählen hier den remainder (Rest), was auch nützlich sein könnte, aber weil wir nur den Rest inkrementieren, bedeutet das, dass wir den currentStep (aktueller Schritt) Zähler nicht zählen. Raffiniert, raffiniert.

Dann können wir die Zähler verwenden, um unsere Nachrichten auszugeben

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

Hier ist es!

Es gibt ein wenig JavaScript, damit Sie mit dem Verschieben des aktiven Zustands des Buttons spielen können, aber die Zählung und die Nachrichten sind komplett CSS.