Verständnis von CSS -Zählern und deren Anwendungsfällen

Es gibt bestimmte CSS -Funktionen, die wir wahrscheinlich nicht sehr oft verwenden. Ich denke

Sie scheinen nicht viele Anwendungsfälle zu haben.
Der Code zum Schreiben ist etwas komplex.

Ich habe kürzlich einen praktischen Anwendungsfall für Zähler gesehen, also dachte ich, ich würde einen kurzen Crashkurs in der Art und Weise geben, wie Zähler geschrieben werden, und diesen Anwendungsfall hier teilen.

Key Takeaways

CSS-Zähler liefern eine dynamische Nummerierung in CSS und ermöglichen die Nummerierung von nicht aufeinanderfolgenden Elementen, die neu angeordnet werden können, ohne die Nummerierung manuell anzupassen. Dies wird durch die Verwendung von Pseudoelementen und konterspezifischen CSS erreicht.
Trotz der anfänglichen Komplexität sind CSS-Zähler nicht schwer zu beibehalten, wenn das Konzept der Pseudoelemente von CSS verstanden wird. Während generierte Inhalte möglicherweise zugängliche Bedenken haben, unterstützen die meisten Browser sie und werden von Bildschirmlesern erkannt.
Ein praktischer Anwendungsfall für CSS -Zähler ist in der W3C -Selektorenstufe 4 -Spezifikation, in der sie verwendet werden, um „Probleme“ und „Beispiele“ in den Inhalt zu zahlen. Dies ermöglicht eine einfache Ergänzung, Entfernung oder Neuordnung von Elementen, während die Nummerierung automatisch aktualisiert wird.

Ein Crashkurs in CSS -Zähler

Mit

CSS -Zählern können Sie Elemente in CSS unter Verwendung der dynamischen Nummerierung nummerieren, ähnlich wie eine geordnete Liste funktioniert. Aber CSS -Zähler sind ganz anders. Diese Funktion verwendet ein Pseudoelement, das mit einigen konterspezifischen CSS kombiniert wird, um eine dynamische „Anzahl“ an einen bestimmten Elementsatz anzuhängen/vorzubereiten.

Hier ist ein Code -Beispiel, ähnlich dem, den ich am Ende dieses Artikels in der Demo verwenden werde:

<span><span>.container</span> {
</span>  <span>counter-reset: issues 0;
</span><span>}
</span>
<span><span>.issue:before</span> {
</span>  <span>counter-increment: issues 1;
</span>  <span>content: "Issue " counter(issues, decimal);
</span>  <span>display: block;
</span><span>}</span>

Der erste Deklarationsblock definiert den Umfang der Anzahl. Dies bedeutet, dass mein Zähler nur innerhalb von Elementen mit einer Klasse von .container erhöht wird. Ich habe eine benutzerdefinierte Kennung namens "Probleme" ausgewählt, mit der der Container mit den gezählten Elementen verknüpft werden muss.

Der zweite Deklarationsblock verwendet das: vor Pseudoelement (ich könnte alternativ verwenden: danach, aber das wäre in einem Zähler selten) und die Inhaltseigenschaft, um den definierten Inhalt vorzubereiten.

Als Teil des Wertes der Inhaltseigenschaft verwende ich die Funktion counter () zusammen mit einer Zeichenfolge, ähnlich wie in JavaScript oder einer anderen typischen Programmiersprache. Die Funktion counter () nimmt zwei Argumente an: die zuvor definierte Zählerkennung (in diesem Fall „Probleme“) und den Zählerstil, der jeder Wert für die Eigenschaft vom Typ Listenstil in bestellten Listen sein kann. Die Standardeinstellung ist "dezimal", was ich in diesem Beispiel verwende.

Wenn Sie immer noch verwirrt sind, wie Zähler funktionieren, hilft diese Mini -Infografik möglicherweise:

Und wenn das nicht genug ist, finden Sie hier ein paar zusätzliche Ressourcen mit weiteren Informationen, einschließlich meines eigenen Artikel, in dem ich ursprünglich eine ähnliche Infografik veröffentlicht habe:

• CSS-Zähler: Gegeninkrement und Freunde (beeindruckende Netze)
• So profitieren Sie von CSS generierten Inhalten und Zähler (Smashing Magazine)
• CSS -Zählerstile Level 3 (W3C Spec)

Dieser letzte Link ist der Entwurf der Redakteure der Zählerspezifikation, in der einige brandneue konterbezogene Funktionen eingebracht werden, die wahrscheinlich nicht viel oder browser-Unterstützung haben und die in zukünftigen Versionen der Spezifikation möglicherweise gefährdet sein könnte. Die Funktionen, die ich in diesem Artikel verwende

Ermittlung des Werts von CSS -Zähler

Auf einen oberflächlichen Blick treten zwei Hauptprobleme auf, wenn Sie zum ersten Mal über die Implementierung von CSS -Zählern nachdenken:

Bestellte Listen tun dies bereits. Warum sollte ich also eine Funktion benötigen, die so komplex ist, nur um Elemente zu zahlen?
generierte Inhalte sind nicht zugänglich und dies wird inhalt mit der Präsentation gemischt.

Die erste dieser beiden Probleme ist überhaupt kein Problem. Wenn Sie aufeinanderfolgende Elemente nummerieren möchten, wäre es angemessen, eine geordnete Liste zu verwenden (d. H. Ein

mit verschachtelten
1. Elementen). Die CSS -Zähler sind jedoch nicht für die Nummerierung aufeinanderfolgender Elemente gedacht. Sie sind für die Nummerierung von nicht aufeinanderfolgenden Gegenständen dienen, wo immer sie sich im DOM befinden, und dann in der Lage zu sein, sie neu zu bestellen, ohne dass die Anzahl der jeweils vorbereiteten Zahl geändert werden muss.
   , obwohl Zähler ein wenig komplex sein können, wenn Sie den ersten Blick betrachten, sobald Sie das Konzept der Pseudoelemente von CSS erfassen, sind sie wirklich nicht so schwer zu ändern und zu warten.
   Das andere Problem, das sich auf die Zugänglichkeit bezieht, scheint kein so großes Problem zu sein wie in der Vergangenheit. Ein Artikel von Léonie Watson endete:

   „[g] energiegeladener Inhalt wird in den meisten Browsern die Zugänglichkeit unterstützt und von Bildschirmlesern entsprechend erkannt.“

   Unterstützung ist jedoch nicht 100%. Ich würde daher sagen, dass der „Inhalt“ von dekorativem Wert sein und nicht entscheidend für das Verständnis oder die Funktionalität des Die Website ist enthalten. Mit diesem ausgewogenen Ansatz sollte es in bestimmten Fällen, wie die unten beschrieben, in Ordnung sein.

   .

   Ein einfacher Anwendungsfall
   Vor kurzem habe ich mir die Spezifikation der W3C -Selektoren Level 4 angesehen und festgestellt, dass sie „Probleme“ und „Beispiele“ haben, die in den Inhalt durchsetzt sind. Ich habe das schon einmal gesehen, aber ich habe mich erst dann entschlossen, es ein wenig zu untersuchen. Diese Elemente sind nummeriert, daher fragte ich mich, wie sie sie hinzufügen und entfernen konnten, ohne das gesamte Satz jedes Mal wieder zu nummerieren. Ich dachte

   Nein. Sie verwenden CSS -Zähler, wie im folgenden Screenshot angegeben:

   

   Auf ihrer Seite haben sie nummerierte Probleme (die roten Felder) und nummerierte Beispiele (die gelben Felder). Wenn Sie eine benutzerdefinierte Kennung für jeden gezählten Satz verwenden, können sie die Elemente problemlos hinzufügen, entfernen oder sogar neu bestellen, und das CSS fügt den Elementen automatisch die richtigen Zahlen hinzu.

   Darüber hinaus enthalten diese Spec -Seiten am Ende der Seite auch einen Index des Ausgabenindex, der denselben Zählerkennung wie die Ausgaben verwendet, jedoch in einem neuen Bereich, damit die Anzahl frisch beginnt. Die doppelte Ausgabenliste erzeugt ein wenig mehr Arbeit, um die Probleme aufrechtzuerhalten, aber die Reihenfolge ist im Allgemeinen einfach zu pflegen, solange sie dem entspricht, was sich im Inhaltskörper geändert hat.

   a Drag-and-Drop-Demo

   Ich habe das Beispiel des W3C nachgebildet, damit Sie mit der Funktionsweise der Zähler herumspielen können, aber auch zu sehen, wie einfach es ist, dynamische Listen auf diese Weise aus nicht-adjace-Elementen mit nur HTML und CSS zu erstellen.

   Siehe den Pen 20FE8F19AE48C210DA6C5DF78C0CF6F8 von SitePoint (@sinepoint) auf CodePen.

   In der Demo verwende ich die sortierbare Funktion von JQueryui, damit Sie einen der Absätze auf der Seite ziehen und neu ordnen können, einschließlich der Kästchen "Problem" und "Beispiel". Beachten Sie, wie sich die Zahlen ändern, abhängig davon, wo die Elemente gezogen werden (obwohl das Verhalten der Zahl beim Ziehen etwas schrullig zu sein scheint). Ich habe auch unten eine doppelte „Problemliste“ aufgenommen, wie auf den W3C -Seiten.

   Schlussfolgerung

   Dies sollte ein wenig klarer machen, wofür CSS -Zähler verwendet werden können. Denken Sie an ein Dokument, das häufig bearbeitet wird, vielleicht sogar etwas, das Benutzer generiert, wenn die Elemente neu sortiert oder neu bestellt werden können. Und wie bereits erwähnt, sind diese Arten von Zählern am wahrscheinlichsten nützlich, wenn die Nummerierung für das Verständnis des Inhalts nicht von entscheidender Bedeutung ist und wenn die Elemente innerhalb der Quelle nicht adjazent sind.

   Wenn Sie CSS -Zähler auf andere nützliche Weise gesehen haben, lassen Sie es uns in den Kommentaren wissen.

   häufig gestellte Fragen (FAQs) zu CSS -Zählern

   Was sind die verschiedenen Arten von CSS -Zählern? Der Typ "Zähler" wird für einstufige Zähler verwendet, z. B. für die Nummerierung von Überschriften in einem Dokument. Der Typ "Zähler" dagegen wird für mehrstufige Zähler verwendet, z. B. die Nummerierung von Unterabschnitten innerhalb von Abschnitten. Beide Typen werden mit der Eigenschaft "Inhalt" in CSS verwendet, um den Wert des Zählers anzuzeigen.

   Wie setze ich einen CSS-Zähler zurück? Diese Eigenschaft setzt den Zähler auf eine bestimmte Nummer. Beispielsweise wird der Abschnitt „Gegenübernahme: Abschnitt“ den Abschnitt "Abschnitt" auf Null zurücksetzen. Sie können den Zähler auch auf eine andere Zahl einstellen, z.

   Ja, CSS -Zähler können mit Listen verwendet werden. Dies ist besonders nützlich, wenn Sie die Nummerierung von Listenelementen anpassen möchten. Sie können die Eigenschaften von "Counter-Re-Re-Reset" und "Counter-Increment" verwenden, um die Nummerierung und die Eigenschaft "Inhalt" zu steuern, um den Wert des Zählers anzuzeigen.
   Die von CSS -Zähler generierten Zahlen können wie jeder andere Text in CSS gestylt werden. Sie können Eigenschaften wie "Farbe", "Schriftart", "Schriftgewicht" usw. verwenden, um die Zahlen zu stylen. Die Stile werden auf die Zahlen angewendet, wenn sie von der Eigenschaft "Inhalt" generiert werden. . Dies kann durch die Verwendung der Eigenschaft "Counter-Resiet" auf dem "Tabellen" -Element, der Eigenschaft "Gegeninkrement" auf dem "TR" -Element und der Eigenschaft "Inhalt" auf einem "Vorher" oder "Nachher" verwendet werden -Element innerhalb des 'tr' Elements.
   Wie erstelle ich einen Multi-Level-Zähler mit CSS-Zählern? CSS. Diese Funktion nimmt zwei Argumente an: den Namen des Zählers und eine Zeichenfolge, die als Trennzeichen zwischen den Ebenen verwendet werden soll. Zum Beispiel "Inhalt: Zähler (Abschnitt". Ja, CSS-Zähler werden oft mit den Pseudo-Elementen "vor" und "nach" verwendet. Die Eigenschaft "Inhalt", mit der der Wert des Zählers angezeigt wird, kann nur mit diesen Pseudoelementen verwendet werden. Inkrementiert mit der Eigenschaft "Counter-Increment". Diese Eigenschaft erhöht den Wert des Zählers jedes Mal, wenn sie aufgerufen wird. Beispielsweise erhöhen Sie den Abschnitt "Abschnitt". . Dies kann durchgeführt werden, indem die Eigenschaft "Gegenaufnahme" oder "Gegeninkrement" auf eine negative Zahl festgelegt wird. Zum Beispiel wird "Gegenüber -Re -Reset: Abschnitt -1;" den Abschnitt "Abschnitt" auf negativ festgelegt.

   Kann ich CSS -Zähler mit anderen CSS -Eigenschaften verwenden?

   Ja, CSS -Zähler können mit anderen CSS -Eigenschaften verwendet werden. Beispielsweise können Sie die Funktion "Zähler" oder "Zähler" mit der Eigenschaft "Inhalt" verwenden, um den Wert des Zählers anzuzeigen. Sie können auch die Eigenschaften von "Gegenaufnahmen" und "Gegeninkrement" mit jedem Element verwenden, um den Wert des Zählers zu steuern.

Das obige ist der detaillierte Inhalt vonVerständnis von CSS -Zählern und deren Anwendungsfällen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!