Wie man CSS benutzerdefinierte Zähler umkehrt

Ich brauchte eine nummerierte Liste von Blogbeiträgen, die mit der letzten/höchsten zuerst und von dort abwärts aufgelistet wird. So

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

Aber das Obige ist nur Text. Ich wollte dies mit einem semantischen <ol>-Element tun.

Der einfache Weg

Dies kann mit dem HTML-Attribut reversed für das <ol>-Element erfolgen.

<ol reversed>
  <li>This</li>
  <li>List</li>
  <li>Will Be</li>
  <li>Numbered In</li>
  <li>Reverse</li>
</ol>

Für die meisten Leute wäre das genug. Aufgabe erledigt. 

Aber ich brauchte benutzerdefinierte Stile für die Zähler. 

Es sei bekannt, dass benutzerdefinierte Listennummerstile mit dem Pseudo-Element ::marker erstellt werden können, aber dies wird von Chrome noch nicht unterstützt (obwohl ich höre, dass es bald kommt).

Da ich vollkommen browserübergreifend kompatible benutzerdefinierte Nummernstile wollte, entschied ich mich für benutzerdefinierte Zähler. 

Hinzufügen und Gestalten eines benutzerdefinierten Zählers

Das Gestalten der Zähler einer geordneten Liste anders als der Rest der Liste erfordert das Deaktivieren der Standardzähler und das Erstellen und Anzeigen unserer eigenen mithilfe von CSS-Zählern. Chris teilte vor einiger Zeit ein paar Rezepte, die einen Blick wert sind.

Unter der Annahme, dass wir den folgenden HTML-Code haben

<ol class="fancy-numbered">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

…müssen wir zuerst die Standardzähler, die mit allen geordneten Listen geliefert werden, deaktivieren, indem wir die CSS-Eigenschaft list-style-type auf none setzen, wie folgt

ol.fancy-numbered {
  list-style-type: none;
}

Das entfernt die gesamte Standardnummerierung. Als Nächstes erstellen wir einen Zähler in CSS, um die Anzahl der Elemente in der Liste zu verfolgen.

ol.fancy-numbered {
  list-style-type: none;
  counter-reset: a;
}

Das gibt uns einen Zähler namens „a“, aber Sie können ihn nennen, wie Sie möchten. Lassen Sie uns unseren Zähler mithilfe des Pseudo-Elements ::before auf dem Listenelement (<li>) anzeigen.

ol.fancy-numbered li::before {
  content: counter(a)'.';
}

Dadurch wird der Inhalt des Pseudo-Elements auf den Wert unseres Zählers gesetzt. Im Moment druckt das 1er neben Ihrem Listenelement.

Wir müssen dem CSS-Zähler mitteilen, wie er sich inkrementieren soll.

ol.fancy-numbered li::before {
  content: counter(a)'.';
  counter-increment: a;
}

Der Startwert von „a“ ist null, was seltsam erscheint, aber die Standardinkrementierung ist 1, was bedeutet, dass dies der eigentliche Startpunkt wird. Die Inkrementierung um 1 geschieht zufällig als Standard, aber wir können das ändern, wie wir bald sehen werden.

Wir können nun beliebige benutzerdefinierte Stile auf den Zähler anwenden, da der Zähler nur ein Text-Pseudo-Element ist, das offen für Styling ist.

ol.fancy-numbered li::before {
  content: counter(a)'.';
  counter-increment: a;   
  position: absolute;   
  left: 0;   
  color: blue;   
  font-size: 4rem;
}

Zum Beispiel haben wir hier die Zählerfarbe auf blau gesetzt und die Schriftgröße erhöht. Dies sind Dinge, die wir mit dem Standardzähler nicht tun konnten.

Benutzerdefinierte Zähler umkehren

Wenn wir die reversed-Eigenschaft zum <ol>-Element hinzufügen, wie wir es zuvor getan haben, werden wir keine Auswirkung beobachten, da wir die Standardnummerierung deaktiviert haben. Das ist genau das, was diese Eigenschaft tut.

<ol class="fancy-numbered" reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Der obige Code hat keine Auswirkung auf unsere benutzerdefinierte Nummerierung. Es ist wahrscheinlich immer noch eine gute Idee, sie beizubehalten, da unsere Absicht ist, die Liste umzukehren. Das hält die Dinge semantisch korrekt.

Um die visuelle Reihenfolge unserer zählerbasierten Nummerierung umzukehren, müssen wir die Gesamtzahl der Elemente in der Liste kennen und den Zähler anweisen, von dieser Zahl aus zu starten und von dort abwärts zu zählen.

ol.fancy-numbered {
  counter-reset: a 4;
  list-style-type: none;
}

Hier setzen wir counter-reset auf 4. Mit anderen Worten, wir sagen dem Browser, dass er mit der Zählung bei 4 statt bei 1 beginnen soll. Wir verwenden 4 statt 3, wiederum weil die Regel counter() auf das erste Element der Liste angewendet wird, das 0 ist. Aber in dem Fall, in dem wir rückwärts zählen, wird 4 zu unserem 0. Wenn wir von 3 aus starten und abwärts zählen, landen wir bei 0 statt bei 1.

Als Nächstes ändern wir unsere Regel counter-increment, um um 1 zu *verringern* statt zu erhöhen, indem wir sie zu einer *negativen Ganzzahl* machen.

ol.fancy-numbered li:before {
  content: counter(a)'.';
  counter-increment: a -1;
  position: absolute;   
  left: 0;   
  color: blue;   
  font-size: 4rem;
}

Und das ist alles! Jetzt steht Ihnen die Welt für Dinge wie Schrittzähler offen.

Oder wie wäre es mit einer Zeitachse?

Vielleicht ein Geschäftsplan?