So verwenden Sie CSS-Zähler, um geordnete Zahlenlisten zu verschönern

Beim Webdesign ist es sehr wichtig, eine organisierte Methode zur Anzeige von Daten zu verwenden, damit Benutzer die auf der Website angezeigten Datenstruktur und Inhalte klar verstehen. Die Verwendung einer geordneten Liste ist eine einfache Möglichkeit, eine organisierte Anzeige von Daten zu erreichen.

Wenn Sie eine umfassendere Kontrolle über die Darstellung der geordneten Listennummern benötigen, müssen Sie möglicherweise mehr html DOM Struktur hinzufügen oder dies über JavaScript tun. Glücklicherweise kann dieses Problem durch die Verwendung CSS計數器viel einfacher gelöst werden.

In diesem Tutorial erfahren wir, was CSS計數器sind und einige Anwendungsfälle.

Das Problem mit geordneten Listen

Wenn Sie eine geordnete Liste wie die folgende schreiben, fügt der Browser automatisch Zahlen vor die Listenelemente ein.

<ol>
  <li>Mein erster Artikel</li>
  <li>Mein zweiter Artikel</li>
  <li>Mein dritter Artikel</li>
</ol> 

Das sieht gut aus, ermöglicht Ihnen jedoch keine Formatierung der Zahlen. Angenommen, Sie müssen die Liste ändern, indem Sie die Zahlen davor in einem Kreis platzieren. Was würden Sie tun?

Eine Möglichkeit besteht darin, die Liste vollständig zu entfernen und die Nummern manuell selbst hinzuzufügen.

<div>
  <span>1</span> Mein erster Artikel
</div>
<div>
  <span>2</span> Mein zweiter Artikel
</div>
<div>
  <span>3</span> Mein dritter Artikel
</div>

div {
  Rand unten: 10px;
}
div Spanne {
  Anzeige: Inline-Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Breite: 25px;
  Höhe: 25px;
  Randradius: 50 %;
  Hintergrundfarbe: #000;
  Farbe: #fff;
} 

Dies ist genau das, was wir erreichen möchten, es hat aber auch einige Nachteile. Erstens ist das manuelle Hinzufügen von Zahlen mühsam. Wenn Sie eine Nummer ändern müssen, müssen Sie sie einzeln ändern. In diesem Fall können Sie zur Lösung dieser Probleme JavaScript verwenden, um <span> -Tags dynamisch hinzuzufügen. Dadurch werden DOM jedoch weitere Knoten hinzugefügt, was zu einem hohen Speicherverbrauch führt.

In den meisten Fällen ist es besser, CSS-Zähler zu verwenden. Schauen wir uns an, warum das so ist.

Einführung in CSS-Zähler

CSS計數器sind seitenweite Variablen, deren Werte mithilfe von CSS Regeln geändert werden können.

Stellen Sie zunächst den Zähler mit der Eigenschaft counter-reset ein. list-number ist der hier verwendete Variablenname.

div.liste {
  Zähler-Reset: Listennummer;
}

Verwenden Sie als Nächstes counter-increment um den Wert des Zählers zu erhöhen.

div.Liste div {
  Zählerinkrement: Listennummer;
}

Jetzt wird list-number jedes Mal um eins erhöht, wenn ein div.listdiv -Element erscheint.

Schließlich verwenden wir das Pseudoelement :before mit einer festgelegten content und counter() -Funktion, um die Zahl anzuzeigen.

div.list div:vor {
  Inhalt: Zähler (Listennummer);
}

Hier ist der vollständige Code:

<div Klasse="Liste">
  <div>Mein erster Artikel</div>
  <div>Mein zweiter Artikel</div>
  <div>Mein dritter Punkt</div>
</div>

div.Liste {
  Zähler-Reset: Listennummer;
}
/** Sie können Zählerinkremente in :before-Elementen verwenden **/
div.list div:vor {
  Zählerinkrement: Listennummer;
  Inhalt: Zähler (Listennummer);
}

Nun sind wir noch nicht ganz so weit. Lassen Sie uns das Pseudoelement :before formatieren, damit es besser aussieht.

div.list div:vor {
  Zählerinkrement: Listennummer;
  Inhalt: Zähler (Listennummer);
  
  Rand rechts: 10px;
  Rand unten: 10px;
  Breite: 35px;
  Höhe: 35px;
  Anzeige: Inline-Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Schriftgröße: 16px;
  Hintergrundfarbe: #d7385e;
  Randradius: 50 %;
  Farbe: #fff;
}

Ändern der Startnummer

Standardmäßig setzt counter-reset den Zähler auf 0. Wenn das erste counter-increment aufgerufen wird, beginnt es bei 1. Sie können den Anfangswert festlegen, indem Sie counter-reset -Funktion eine Ganzzahl als zweites Argument übergeben.

div.Liste {
  Zähler-Reset: Listennummer 1;
} 

Wenn Sie bei 0 beginnen möchten, können Sie den Anfangswert auf -1 setzen.

div.Liste {
  Zähler-Reset: Listennummer -1;
} 

Ändern des Inkrementwerts

Standardmäßig erhöht counter-increment den Wert des Zählers um eins. Genau wie bei counter-reset können Sie für counter-increment einen Offset-Wert definieren.

In diesem Beispiel setzt counter-reset list-number auf 0 . Bei jedem Aufruf von counter-increment erhöht sich list-number um 2 , sodass Sie die Listennummern 2 , 4 und 6 sehen.

div.liste {
  Zähler-Reset: Listennummer;
}
div.list div:vor {
  Zählerinkrement: Listennummer 2;
  // andere Stile
} 

Zählerformat

counter() kann zwei Parameter annehmen: counter-name und counter-format . Für das zweite Argument können Sie jeden gültigen Listentypwert verwenden, einschließlich:

• decimal (z. B. 1, 2, 3…)
• lower-latin (zB a, b, c…)
• lower-roman (zB i, ii, iii…)

Der Standardwert ist eine Zahl.

Wenn Sie beispielsweise wie ich ein wissenschaftlicher Mensch sind, können Sie für die nummerierten Werte lower-greek Buchstaben verwenden.

div.list div:vor {
  Zählerinkrement: Listennummer;
  Inhalt: Zähler (Listennummer, Kleingriechisch);
  // ... andere Stile
} 

Verschachtelte Zähler

Bei der Verwendung verschachtelter Bestelllisten werden Zahlen immer in diesem Format angezeigt:

Wenn Sie numerische Zahlen für Unterlistenelemente benötigen (z. B. 1,1), können Sie CSS計數器mit counters() verwenden.

<ol>
  <li>
     Mein erster Artikel
    <ol>
      <li>Mein verschachteltes erstes Element</li>
      <li>Mein verschachteltes zweites Element</li>
    </ol>
  </li>
  <li>Mein zweiter Artikel</li>
</ol>

ol {
  Listenstiltyp: keiner;
  Zähler-Reset:Liste;
}
ol li:vor {
    Zählerinkrement:Liste;
    Inhalt: Zähler (Liste, ".") ". ";
}

Beachten Sie, dass wir die Funktion counters() anstelle counter() verwenden.

Der zweite Parameter der Funktion counters() ist die Verbindungszeichenfolge. Es kann auch ein drittes Argument haben, um das Format festzulegen (z. B. griechische oder römische Ziffern).

Verschachtelter Zähler mit Titel

Elemente wie <h1> , <h2> sind nicht im Dokument verschachtelt. Sie erscheinen als unterschiedliche Elemente, stellen aber dennoch eine Hierarchie dar. So fügen Sie verschachtelte Zahlen in Ihren Titel ein:

Körper {
  Zähler-Reset:h1;
}
h1 {
  Zähler-Reset:h2;
}
h1:vor {
  Zählerinkrement: h1;
  Inhalt: Zähler(h1) ". ";
}
h2:vor {
  Zählerinkrement:h2;
  Inhalt: Zähler(h1) "." Zähler(h2) ". ";
}

Jedes Mal, wenn <h1> gefunden wird, wird der <h2> -Zähler zurückgesetzt. <h2> erhält im Dokument eine Nummer relativ zu <h1> .

Browserunterstützung

Glücklicherweise finden CSS Zähler seit ihrer Einführung mit CSS2 breite Browserunterstützung. Obwohl die Verwendung der Funktion counter() mit anderen Eigenschaften als dem Inhalt noch experimentell ist, können Sie alle in diesem Tutorial behandelten Beispiele ohne Bedenken ausführen.

Eine einfache Herausforderung

Sind Sie bereit für eine einfache Herausforderung mit CSS-Zählern?

Verwenden Sie CSS計數器, um 1 bis 1000 mit ihren römischen Zeichen in nur 10 Codezeilen anzuzeigen.

Wenn Sie nicht weiterkommen, können Sie es folgendermaßen tun:

Um 1000 div Elemente zu erstellen, können Sie Folgendes verwenden.

für (var i = 0; i < 1000; i++) {
  Dokument.body.appendChild( Dokument.createElement("div") );  
}

CSS-Zähler:

Körper {
  Zähler-Reset:Nummer;
}
div:vor {
  Zählerinkrement:Zahl;
  Inhalt: Zähler (Zahl) " => " Zähler (Zahl, klein-römisch);
}

abschließend

CSS-Zähler sind eine wenig bekannte Funktion in CSS, aber Sie werden überrascht sein, wie oft sie nützlich sind. In diesem Tutorial haben wir besprochen, wie und wann CSS-Zähler verwendet werden, und einige Beispiele gezeigt.

Nachfolgend finden Sie die Liste der von uns verwendeten Eigenschaften.