Numbering In Style

Wenn Sie Dinge auf einer Website ordnen möchten, ist die geordnete Liste (<ol>) wahrscheinlich Ihre erste Wahl. Es ist auch verständlich, dass Sie diese Nummern formatieren möchten. Seltsamerweise ist die Formatierung dieser Listen-Nummern in CSS nicht sehr einfach. Glücklicherweise ist es auch nicht unmöglich. Roger Johansson hat ein Tutorial, das zeigt, wie es mit dem Pseudo-Element :before gemacht werden kann, das einen counter als Wert für die Eigenschaft content haben kann.

Aber lassen Sie es sich gesagt sein, die Anwendung von nummerierten Zählern ist nicht auf geordnete Listen beschränkt. Sagen wir zum Beispiel, Sie möchten die Frage-Antwort-Paare einer FAQ-Liste nummerieren.

Sie hätten Markup wie dieses

<dl class="faq">

	<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
	<dd>1,000,000</dd>
	
	<dt>What is the air-speed velocity of an unladen swallow?</dt>
	<dd>What do you mean? An African or European swallow?</dd>
	
	<dt>Why did the chicken cross the road?</dt>
	<dd>To get to the other side</dd>
	
</dl>

Jedes neue <dt>-Element ist eine neue Frage, daher sollten wir die Nummerierung hier anwenden. Es ist so einfach wie das hier

.faq {
	counter-reset: my-badass-counter;
}
.faq dt:before {
	content: counter(my-badass-counter);
	counter-increment: my-badass-counter;
}

Formatieren Sie das :before-Element nach Belieben. Zum Beispiel

Ich wollte Sie nur auf diese Möglichkeit aufmerksam machen. Wenn sie Ihnen erst einmal bewusst ist, denken Sie an alle möglichen Dinge, die Sie nummerieren können. Ich habe zum Beispiel kürzlich eines meiner Lieblingsrezepte gebloggt und jeden Schritt/jedes Foto mit blockigen römischen Ziffern nummeriert.

Was mich daran erinnert: Die Nummern müssen keine Dezimalzahlen sein. Sie können alles sein, was list-style-type sein kann. Nämlich

disc (• • •)
circle (○ ○ ○)
square (▪ ▪ ▪)
decimal (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian (Ա Բ Գ)
georgian (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

Alles, was Sie tun müssen, ist, dies im Zählerwert selbst anzugeben

content: counter(my-counter, lower-roman);

Die Zukunft

Das oben Genannte ist cool und gehört zur Kategorie „Heute nutzbar™“. Aber es fühlt sich fast nach einem Hack an, wenn man den Sprung bedenkt, den CSS3-Listen machen. Sobald die Browserunterstützung dafür vorhanden ist, können wir Dinge tun wie den Marker der Liste nach Belieben ansprechen

/* 
  Examples from THE FUTURE
  No browser support at the time of this writing 
*/

li::marker { 
  width: 30px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;
}

ol { 
  list-style: symbols("*" "\2020" "\2021" "\A7"); 
}

ul { 
  list-style-type: "★"; 
}