Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]

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.

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, ".") " ";


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]