CSS/Eigenschaften/generierter Inhalt/Nummerierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

CSS erlaubt das Erstellen und Kontrollieren automatischer Nummerierungen, die sich bei Änderung des Markups dynamisch anpassen. Wichtig sind in diesem Zusammenhang folgende Eigenschaften:

sowie die Funktionen

counter()[Bearbeiten]

counter() (engl. für Zähler) ist eine CSS-Funktion für Variablen, deren Werte durch CSS-Regeln inkrementiert (erhöht) werden, um zu verfolgen, wie oft sie benutzt worden sind. Dadurch ist es möglich Inhalt abhängig von seiner Position in der Webseite unterschiedlich darzustellen.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Syntax

counter(name, <'list-style-type'>)

Der Wert eines Zählers wird durch die Verwendung von counter-reset (Initialiseren und Zurücksetzen) und counter-increment (Erhöhen des Werts) bestimmt.

Anwendungsbeispiele[Bearbeiten]

Beispiel: Zählung von Absätzen ansehen …
p {
  counter-increment: posMarkup;	
  position: relative;
}

p::before {
  content: counter(posMarkup);
  position: absolute;
}
Der Absatz p erhält mit counter-increment die Variable posMarkup zugewiesen, deren Wert bei jedem Auftreten um den Standardwert 1 erhöht wird. (Tipp: Fügen Sie im Frickl eine 2 hinzu und aktualisieren Sie die Seite.)
Vor jeden Absatz wird nun mit ::before ein Pseudoelement erzeugt, dass mit der content-Eigenschaft die Ergebnisse der counter()-Funktion ausgibt.

Initialisieren eines Zählers[Bearbeiten]

Im oberen Beispiel wurde auf das Initialisieren eines Zählers verzichtet. In nächsten Beispiel sind die Textabsätze in mehreren section-Elementen organisiert. Dabei würde die Zählung in jedem Element wieder bei 1 anfangen.

Beispiel: Zählung von Absätzen ansehen …
body {
  counter-reset: posMarkup 0;  
}  

p {
  position: relative;
}

p::before {
  counter-increment: posMarkup;	
  content: counter(posMarkup, upper-roman);
  position: absolute;
}
Das body-Element erhält mit counter-reset: posMarkup 0; eine Festlegung für einen ZählerposMarkup, der bei 0 beginnt und für die ganze Webseite gilt.

Der Absatz p erhält nun mit ::before ein Pseudoelement. Die Erhöhung des Zählwerts durch counter-increment findet nun nicht mehr im Absatz, sondern gleich im Pseudoelelement statt.

Über content werden die Ergebnisse der counter()-Funktion ausgegeben. Dabei wird hier zusätzlich zum Namen der list-style-type upper-roman angegeben, sodass anstelle des Standardwerts decimal mit Dezimalzählung hier römische Ziffern verwendet werden.

verschachtelte Kapitelzählung[Bearbeiten]

Beispiel ansehen …
    body {
      counter-reset: section;
    }

    h2 {
      counter-reset: subsection;
    }

    h2::before {
      counter-increment: section;
      content: "Band " counter(section) " - ";
      color: red;
    }

    h3::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) ": ";
      color: green;
    }


counters()[Bearbeiten]

Die counters()-Funktion erzeugt eine Zeichenkette, die aus allen Zählern und einem angegebenen String erzeugt wird.

Syntax

counters(item, ".") " ";


Beispiel: Erzeugen einer verschachtelten Zählhierarchie
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
Das CSS zählt verschachtelte Listenelemente als "1", "1.1", "1.1.1", usw.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]