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!