Versteckt in den Tiefen der CSS-Spezifikation finden Sie CSS-Zähler. Wie der Name schon andeutet, können Sie eine Sache auf Ihrer Seite zählen, wobei CSS den Wert jedes Mal erhöht, wenn er auf dem Dokument erscheint.
Dies ist vor allem nützlich, wenn Sie eine Tutorial-Website haben - sei es zum Thema Kochen oder Web-Entwicklung - sie haben alle Schritte zu folgen, und Sie müssen wahrscheinlich die Schrittnummer vor dem eigentlichen Inhalt schreiben. CSS-Counter können dabei automatisch helfen. Sie können sie sogar dazu verwenden, die Bilder in Ihrer Datei zu zählen und Zahlen vor den Bildunterschriften hinzuzufügen.
In diesem Beispiel zeige ich Ihnen, wie Sie dies erreichen können, indem Sie ein einfaches Rezept für Pfannkuchen erstellen und CSS für den Anfang jedes Absatzes suchen und die Nummer des vorherigen Schritts hinzufügen.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
Das Ziel in diesem HTML ist, dass jeder Absatz ein anderer Schritt ist und mit CSS können wir diese dynamisch hinzufügen, indem wir so wenig wie 3 Zeilen Code schreiben.
CSS-Zähler verwenden die Eigenschaft counter-increment. Es ist schon eine Weile her, dass es in CSS 2.1 implementiert wurde. Um es zu verwenden, müssen wir zuerst den Standardwert des Counters auf 0 setzen, bevor alles, was wir zählen wollen, auf der Seite erscheint. Es ist also eine gute Idee, dies in der Körper Stile, so:
body {counter-reset: steps;}Diese Zeile setzt den Zähler einfach auf 0 zurück und er benennt ihn auch, so dass wir ihn später aufrufen können und uns auch erlaubt, mehr als einen Zähler auf der Seite zu haben.
Der nächste Schritt ist die Verwendung des Pseudo-Elements : before , um alle Absätze zu markieren und die Schrittnummer hinzuzufügen, bevor der gesamte Text beginnt. Dazu müssen wir Counter-Inkrement verwenden und dann den Inhalt angeben. Wir können einfach die Zahl verwenden, oder wir können einen Text anhängen oder voranstellen, in diesem Fall werden wir "Schritt" vor den Wert des Zählers setzen, so:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Wir sollten diesen Inhalt auch etwas hervorheben und dafür eine größere Schriftgröße als die Absätze geben und sie fett machen:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Wenn Sie diese Idee in Aktion sehen wollen, können Sie sehen der Stift, den ich erstellt habe.
Eine ständige Sorge bei der Arbeit mit CSS ist die Browser-Unterstützung, aber da dies eine CSS 2.1-Implementierung ist, ist die Browser-Unterstützung großartig: Es wird von allen gängigen Browsern, Desktop und Mobile unterstützt, der einzige nennenswerte Browser, der dies nicht unterstützt, ist IE7. und gemäß meiner Statistik wird der Zähler IE7 nur von 0,61% der Leute benutzt, also denke ich können wir sagen, dass IE7 bald abfliegen wird. Ob Sie IE7 unterstützen müssen oder nicht, hängt von den Statistiken Ihrer eigenen Website ab.
CSS-Zähler werden nicht in jedem Projekt verwendet, aber Sie sollten sie im Hinterkopf behalten, da sie sich irgendwann als nützlich erweisen können.
Haben Sie in einem Projekt CSS-Zähler verwendet? Welchen Nutzen können Sie für sie sehen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Bild zählt über Shutterstock.