Laufende Zählungen ohne JavaScript erstellen

CSS Counter
Kommentare

Ein Zähler lässt sich an vielen Stellen einer Website verwenden und bietet einige nützliche Funktionen. Für viele Zählerarten wird meist JavaScript bemüht, obwohl sich auch mithilfe von CSS eine laufende Zählung leicht in eine Website einbinden lässt.

Will Boyd erklärt in einem Blogpost, welche Arten von Zählern mit CSS erstellt werden können und wofür sich solche CSS Counter beispielsweise einsetzen lassen.

Nutzung der CSS-Zähler

Mit CSS lassen sich einige nützliche Zähler erstellen, etwa eine einfache Seitennummerierung. Zunächst wird das Body-Element im Dokument gefunden und ein pages genannter Zähler initialisiert, bevor dieser hochgezählt und angezeigt wird. Genauso lassen sich mehrere Counter erstellen, indem verschiedene Namen für die unterschiedlichen Zähler genutzt werden.

Zähler-Properties lassen sich auch in Pseudo-Selektoren wie :checked platzieren, sodass der Zähler auf eine Auswahl der Checkboxes durch den Nutzer reagieren und die Anzahl der ausgewählten Boxen zurückgeben kann. Zudem kann der Zähler mit jeder ganzen Zahl hoch- oder runtergezählt sowie der Startwert des Zählers vorgegeben werden. So können CSS Counter beispielsweise für kleinere Zahlenspiele verwendet werden:

Screenshot CSS Counter Game

Screenshot CSS Counter Game

 

Screenshot: CSS Counter Game

Zähler lassen sich also leicht mit CSS in eine Website einbinden und bieten dabei viele Vorteile. Einerseits lassen sie sich auf jedes Element anwenden, andererseits ist der Browser-Support sehr gut, sodass keine Fallback-Lösung nötig ist. In seinem Blogpost gibt Will Boyd nicht nur Code-Beispiele sondern präsentiert auch einige Demos, wie sich CSS-Zähler auf unterschiedliche Weise nutzen lassen.

Aufmacherbild: Wooden abacus with numbers and three rows of different colored counters for manual computing isolated on a white background von Shutterstock / Urheberrecht: Photology1971

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -