Schneller Tipp Verwenden von CSS-Zählern zum Stilieren inkrementeller Elemente

Lernen Sie CSS: Das komplette Handbuch

Wir haben ein umfassendes Handbuch erstellt, mit dessen Hilfe Sie CSS erlernen können, egal ob Sie gerade erst mit den Grundlagen beginnen oder etwas weiter fortgeschrittenes CSS erkunden möchten.

In diesem kurzen Tipp werden die Grundlagen der CSS-Zähler behandelt. eine nützliche, aber nicht so bekannte CSS-Funktion. Wenn wir mit der Erstellung unserer Demo fertig sind, schauen wir uns einige Beispiele aus der realen Welt an, die CSS-Zähler nutzen.

Das Ziel: Eine geordnete Liste gestalten

Als ersten Schritt betrachten wir das Layout, das wir erstellen werden:

Nichts Besonderes, richtig? Hier ist jedoch die Herausforderung: Wir werden semantisches Markup verwenden, um die Versuchung zu vermeiden, unnötig zu verwenden div und Spanne Elemente, um diese Gegenmarken zu bauen.

Lassen Sie uns eine saubere und flexible Lösung besprechen!

CSS-Zähler

Um das vorgenannte Layout zu erstellen, genügt es, eine geordnete Liste zu definieren. An diesem Punkt fragen Sie sich vielleicht, ob wir ein anderes Element oder eine ungeordnete Liste hätten verwenden können. Die kurze Antwort lautet "Ja", aber denken Sie daran, dass eine geordnete Liste das einzige Element ist, das die Struktur unserer Seite genau beschreibt.

Sie werden dann wahrscheinlich fragen, ob es möglich ist, das Aussehen der geordneten Listennummern vollständig anzupassen und das gewünschte Layout auf diese Weise zu erstellen. Es wäre wirklich schwierig, die geordneten Listennummern zu gestalten. Glücklicherweise gibt es jedoch einen alternativen Browser-übergreifenden Ansatz verbergen die Standardlistennummern und stattdessen CSS-Zähler verwenden.

Syntax

CSS-Zähler ermöglichen es uns, Zahlen auf der Grundlage wiederholter Elemente zu generieren und sie entsprechend zu gestalten. Stellen Sie sich CSS-Zähler als Variablen vor, deren Werte erhöht werden können. Schauen wir uns die grundlegende Syntax an:

Erstellen Sie einen neuen Zähler

Hier erstellen wir einen neuen Zähler in einer geordneten Liste und definieren dessen Umfang. Wir nehmen das Gegen-Reset Eigentum.

Der erste Wert ist der Name des Zählers
gefolgt von einem optionalen Parameter, der den Startwert des Zählers definiert (Standardeinstellung: 0). Beachten Sie, dass der Zähler immer aufwärts zählt, also der erste generiert Wert in unserem Fall wird 1 sein.

Das untergeordnete Element gestalten

In diesem zweiten Diagramm sehen wir, dass wir das gestalten ::Vor Pseudoelement der li auf unserer Liste.

Hier haben wir den Zählerwert zu dem hinzugefügt Inhalt unserer ::Vor. Es ist erwähnenswert, dass durch die Verwendung von CSS-Zählern mit der content -Eigenschaft die generierten Zahlen mit Strings verkettet werden können.
Wir verweisen auf den Namen unseres Schalters
und definieren Sie den Stil des Zählers als "dezimal". Die möglichen Werte hier ähneln denen für Listenart-Typ Eigentum.
In dem Gegeninkrement In der Regel beziehen wir uns wieder auf den Namen unseres Zählers
Verwenden Sie dann einen optionalen Parameter, um anzugeben, um wie viel der Zähler inkrementiert wird. Der Standardwert ist hier 1.

Markup

Basierend auf dem, was wir gerade besprochen haben, hier unser Markup:

  Listenpunkt
 Text hier.
 
  Listenpunkt
 Text hier.
 
 <-- more list items here -->

Und das verwandte CSS:

ol counter-reset: Abschnitt;  li list-style-type: none; Schriftgröße: 1.5rem; Polsterung: 30px; Rand unten: 15px; Hintergrund: # 0e0fee; Farbe: #fff;  li :: before content: counter (Abschnitt); Gegeninkrement: Abschnitt; Anzeige: Inline-Block; Position: absolut; links: -75px; Spitze: 50%; transform: translateY (-50%); Polsterung: 12px; Schriftgröße: 2rem; Breite: 25px; Höhe: 25px; Text ausrichten: Mitte; Farbe: # 000; Grenzradius: 50%; Grenze: 3px fest # 000;

Dies gibt uns das Ergebnis wie unten gezeigt:

Einschränkungen

An dieser Stelle ist es wichtig zu wissen, dass Pseudo-Elemente nicht zu 100% zugänglich sind. Um dies zu testen, habe ich einen Schnelltest gemacht. Ich habe NVDA installiert und Chrome 50, Firefox 45 und Internet Explorer 11 für die Vorschau der Demoseite verwendet.

Ich fand heraus, dass der Screenreader bei der Verwendung des Internet Explorers den generierten Inhalt nicht ankündigte. In diesen Tagen die Mehrheit von Screenreadern erkennen generierte Inhalte dieser Art, Sie sollten sich jedoch der möglichen Einschränkungen bewusst sein und daher entscheiden, welche Inhalte sicher genug sind, um mit Pseudoelementen generiert zu werden.

CSS-Zähler in freier Wildbahn

Nun, da wir die Grundlagen von CSS-Zählern kennen, sind wir bereit, einige Beispiele zu zeigen, die ihre möglichen Anwendungsfälle aufzeigen.

Erstens werden CSS-Zähler häufig in Online-Zeitungen verwendet. Sie finden sie meistens in den Seitenleisten:

Wallstreet Journal

Handelsblatt

CSS-Zähler können auch in Abschnitten verwendet werden, in denen Schritte beschrieben oder Anweisungen gegeben werden. Hier ist ein Beispiel:

SpikeNode

Beispiele für aufgeblähtes HTML

Im vorherigen Abschnitt haben wir zwei Online-Zeitungen gesehen, die CSS-Zähler nutzen. Sehen wir uns nun zwei weitere Zeitungen an, die aufgeblähtes Markup (wenn auch mit zugänglichem Inhalt) anstelle von CSS-Zählern verwenden:

Washington Post

Wächter

Fazit

In diesem kurzen Tipp haben wir gelernt, wie wir CSS-Zähler verwenden können, um geordnete Listenelemente zu formatieren. Fassen wir kurz zusammen, was wir behandelt haben:

CSS-Zähler sind eine großartige Lösung für jedes Projekt, das eine dynamische Reihenfolge mit benutzerdefinierten Stilen erfordert. Auf der anderen Seite ist dies keine vollständig zugängliche Lösung. Beachten Sie daher die Einschränkungen und verwenden Sie sie ordnungsgemäß.
Um die Zähler einzurichten, müssen wir zwei Eigenschaften angeben (d. H. Gegen-Reset,Gegeninkrement) und eine Funktion (Zähler() oder Zähler ()).
Pseudo-Elemente sind für die Anzeige der Zähler verantwortlich. Denken Sie daran, dass dies über das geschieht Inhalt Eigenschaft, die nur für Pseudo-Elemente verfügbar ist.

Haben Sie in Ihren Projekten schon einmal CSS-Counter verwendet? Wenn ja, teilen Sie uns Ihre Arbeit mit!

Web-Design