Um vollständige Abschnittspfade wie 1.2.1 anzuzeigen, verschachteln Sie nummerierte Listen und verwenden Sie CSS counters(), um ihre Ebenen zu verbinden. In dieser Anleitung erstellen Sie eine lokale HTML-Datei auf einem Mac, behalten die Reihenfolge der Gliederung bei und erfahren, wie Sie die Nummerierung nach Änderungen überprüfen.

Wie funktioniert die Nummerierung mit vollständigen Pfaden?

Ein vollständiger Abschnittspfad zeigt die Position eines Elements auf jeder Ebene an. Zum Beispiel bedeutet 1.2.1, dass es sich um das erste Element innerhalb des zweiten Unterelements des ersten Elements der obersten Ebene handelt. CSS stellt speziell counters() bereit, um verschachtelte Zählerwerte zu kombinieren: von der äußersten zur innersten Ebene, getrennt durch ein Trennzeichen Ihrer Wahl. MDN: counters()-CSS-Funktion

Für diese Aufgabe ist die Gliederung eine nummerierte Liste mit verschachtelten Zweigen. Es handelt sich nicht um ein automatisch generiertes Inhaltsverzeichnis für Überschriften an anderer Stelle im Dokument. In HTML stehen die Elemente einer nummerierten Liste in Baumreihenfolge. Achten Sie deshalb darauf, dass die Quellreihenfolge der gewünschten Lesereihenfolge entspricht. HTML-Standard: Das ol-Element

Das Beispiel verwendet drei Regeln: Für jede beteiligte Liste wird ein Zähler erstellt, für jedes Element wird der Zähler erhöht und der zusammengesetzte Pfad wird vor der Bezeichnung des Elements angezeigt. Dies entspricht dem von MDN dokumentierten Muster für verschachtelte Zähler, wobei die Selektoren auf diese Gliederung beschränkt sind. MDN: CSS-Zähler verwenden

Erstellen Sie die Gliederungsdatei auf Ihrem Mac

Sie benötigen TextEdit und einen Browser wie Safari. Das vollständige Beispiel enthält sein eigenes Stylesheet und synthetische Beispielinhalte. Es sind keine Pakete, Build-Tools oder JavaScript erforderlich.

  1. Öffnen Sie TextEdit und wählen Sie Ablage > Neu.
  2. Wählen Sie Format > In reinen Text umwandeln.
  3. Fügen Sie das vollständige Beispiel unten ein.
  4. Wählen Sie Ablage > Sichern, nennen Sie die Datei outline.html und speichern Sie sie an einem geeigneten Ort, etwa auf Ihrem Schreibtisch.
  5. Wenn TextEdit Sie fragt, welche Dateiendung verwendet werden soll, wählen Sie .html verwenden.

Apple beschreibt diesen Arbeitsablauf mit reinem Text zum Erstellen von HTML-Dateien in TextEdit. Apple: Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

Das Folgende ist ein vollständiges Dokument. Kopieren Sie den Inhalt des Codeblocks, ohne die Markdown-Begrenzungszeilen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Öffnen Sie Safari und ziehen Sie outline.html aus dem Finder in ein Safari-Fenster. Bearbeiten Sie den Quelltext in TextEdit und sehen Sie sich die gerenderte Gliederung in Safari an. Speichern Sie die Datei nach jeder Änderung und laden Sie die Browserseite neu.

TextEdit im Code-Bearbeitungsmodus verwenden

Wenn Sie die Datei erneut öffnen, sehen Sie möglicherweise formatierten Inhalt statt des Quellcodes. Apple dokumentiert zwei Möglichkeiten: Wählen Sie Ablage > Öffnen, klicken Sie auf Optionen einblenden und wählen Sie Rich-Text-Befehle ignorieren; oder aktivieren Sie unter TextEdit > Einstellungen > Öffnen und Sichern die Option HTML-Dateien als HTML-Code statt als formatierten Text anzeigen. Apple: Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

Prüfen Sie die vollständigen Pfade anhand des Beispiels

Die erwartete sichtbare Gliederung sehen Sie unten. Die Bezeichnungen sind neutrale Platzhalter; ihre Positionen bestimmen die Zahlen.

1 Node A
  1.1 Node B
  1.2 Node C
    1.2.1 Node D
    1.2.2 Node E
  1.3 Node F
2 Node G
  2.1 Node H
3 Node I

Dieses Beispiel prüft drei unterschiedliche Übergänge. Node D beginnt die dritte Ebene unter Node C. Node F setzt die zweite Ebene fort, nachdem dieser Zweig beendet ist. Node G setzt die oberste Ebene fort, und sein erstes untergeordnetes Element beginnt mit 2.1. Eine deterministische Traversierung des Beispielbaums hat diese erwarteten Pfade bestätigt; das Beispiel wurde während der Vorbereitung nicht in einem Browser gerendert.

Warum jede CSS-Regel wichtig ist

Der Reset muss sowohl für .outline als auch für .outline ol gelten. Jede verschachtelte Liste benötigt eine neue Instanz von outline-section; ein Reset nur für die äußere Liste würde für jede Ebene keinen eigenen Zähler einrichten. Durch das Erhöhen des Zählers bei jedem Listenelement wird die aktuelle Instanz weitergezählt. MDN: CSS-Zähler verwenden

Die Anzeigeregel verwendet counters(outline-section, "."). Die Pluralfunktion sammelt alle aktiven Instanzen mit diesem Namen. Ersetzen Sie sie durch das Singular counter(outline-section), würde nur der Wert der aktuellen Ebene angezeigt und ein verschachteltes Element würde statt seines vollständigen Pfads mit 1 beschriftet. MDN: counters()-CSS-Funktion

Das Beispiel entfernt die nativen Listenmarkierungen, da es eigene Präfixe bereitstellt. Für jede Liste gilt außerdem role="list": MDN zufolge kann Safari andernfalls Listen, die mit list-style-type: none gestaltet wurden, aus seinem Barrierefreiheitsbaum auslassen. Behalten Sie dieses Attribut bei, wenn Sie eine weitere verschachtelte Liste hinzufügen. MDN: list-style-type-CSS-Eigenschaft

Bearbeiten Sie die Gliederung, ohne ihre Struktur zu beschädigen

Platzieren Sie jedes verschachtelte <ol> innerhalb des <li>, zu dem der Zweig gehört. Node C enthält zum Beispiel seine untergeordnete Liste vor Node Cs schließendem </li>. Eine verschachtelte Liste darf kein direktes Kind einer anderen nummerierten Liste sein. MDN: HTML-Element für nummerierte Listen

Fügen Sie für einen praktischen Bearbeitungstest unmittelbar vor Node C ein neues Element hinzu. Sein neuer Pfad sollte 1.2 lauten; Node C sollte zu 1.3 werden; und Node D sowie Node E sollten zu 1.3.1 beziehungsweise 1.3.2 werden. Node G sollte 2 bleiben. Diese erwarteten Änderungen ergeben sich aus der Hierarchie des Beispiels und eignen sich zur Prüfung, ob die Nummerierung der Zweigstruktur folgt.

Um einen Zweig zu verschieben, verschieben Sie das gesamte zugehörige Listenelement einschließlich seiner verschachtelten Listen und des schließenden Tags. Wenn Sie nur die Bezeichnung verschieben, bleiben die untergeordneten Elemente zurück. Um eine vierte Ebene zu erstellen, wiederholen Sie die vorhandene Struktur verschachtelter Listen innerhalb des passenden Elements. Geben Sie keine zusätzliche Zahl in die Bezeichnung ein.

Verwenden Sie pro Zweig eine untergeordnete Liste, wenn ihre Elemente eine durchgehende Sequenz bilden sollen. Bei dieser Implementierung erzeugt jede weitere Geschwisterliste einen neuen Reset, sodass ihre lokale Nummerierung erneut beginnt. Das Beispiel von MDN zeigt diesen Neustart mit separaten verschachtelten Listen unter demselben Element. MDN: CSS-Zähler verwenden

Diagnostizieren Sie eine fehlerhafte Nummerierung in sinnvoller Reihenfolge

Beginnen Sie mit der Struktur, fahren Sie dann mit den Zählerregeln und schließlich mit der Darstellung fort. Eine Änderung des Einzugs kann eine fehlende Verschachtelungsebene nicht reparieren.

Was Sie sehen Was Sie prüfen sollten Korrektur für dieses Beispiel
Jedes verschachtelte Element zeigt nur eine Zahl Die Funktion in content Verwenden Sie das Plural counters() mit dem Punkt als Trennzeichen.
Jedes Geschwisterelement beginnt bei 1 Den Reset-Selektor Setzen Sie den Zähler bei Listen zurück, nicht bei jedem Element.
Neben den vollständigen Pfaden erscheinen native Zahlen Die Listenstil-Regel Wenden Sie list-style-type: none auf die äußeren und verschachtelten Listen an.
Ein Zweig hat ein unerwartetes Präfix Die Position seiner verschachtelten Liste Lassen Sie die untergeordnete Liste im zugehörigen Element.
Eine andere Liste an anderer Stelle erhält Präfixe Den Geltungsbereich des Zählerselektors Behalten Sie das Präfix .outline in den Regeln bei.

Prüfen Sie außerdem, ob ein Element ausgeblendet wurde. CSS-Zähleroperationen werden nicht für Elemente ausgeführt, die keine Box erzeugen. Dazu zählen Elemente mit display: none. visibility: hidden erzeugt hingegen weiterhin eine Box und kann daher die Zählung beeinflussen. Entscheiden Sie bewusst, ob ein ausgelassenes Element eine Position belegen soll. W3C: Zähler bei Elementen, die keine Boxen erzeugen

Was ist mit benutzerdefinierten Startzahlen?

Dieses Beispiel verwendet bewusst einen benutzerdefinierten Zähler, der bei null beginnt und bis eins hochgezählt wird. HTML-Attribute wie start, reversed und das value eines Listenelements steuern die native Nummerierung nummerierter Listen; die hier gezeigten benutzerdefinierten outline-section-Regeln lesen diese Attribute nicht aus. Wenn Sie nur start="4" hinzufügen, beginnt das angezeigte Präfix in diesem Beispiel daher nicht mit 4. HTML-Standard: Nummerierte Listen und Listenelemente

Wenn Sie nicht fortlaufende Nummerierungen oder absteigende Zweige benötigen, legen Sie diese Anforderung fest, bevor Sie das Stylesheet anpassen. Achten Sie darauf, dass der angezeigte Pfad den vorgesehenen Werten der nummerierten Liste entspricht, statt Attribute hinzuzufügen, die von der benutzerdefinierten Anzeige ignoriert werden.

Entscheiden Sie, ob die Zahlen Darstellung oder Dokumentinhalt sind

Die Präfixe in dieser Anleitung sind von CSS erzeugte Inhalte. Sie eignen sich für eine visuelle Gliederung, doch bei wichtigen Verweisen sind zusätzliche Überlegungen nötig: MDN weist darauf hin, dass Inhalte, die über ::before hinzugefügt werden, von Screenreadern nicht zuverlässig verfügbar gemacht werden. role="list" sorgt dafür, dass die Liste erkannt wird; es garantiert nicht, dass jeder generierte Pfad angesagt wird. MDN: ::before-CSS-Pseudoelement

Wenn ein vollständiger Pfad Bestandteil des eigentlichen Textes sein muss, etwa bei einem Nur-Text-Export, fügen Sie ihn als Text in das Dokument ein oder erzeugen Sie ihn während des Exports. Dadurch ändern sich die Pflegeanforderungen: Bei Änderungen müssen auch diese gespeicherten Pfade aktualisiert werden. Verlassen Sie sich nicht darauf, dass ein visuelles Präfix in jedem Ausgabeformat wichtigen Text bereitstellt.

Prüfen Sie bei einer lokalen visuellen Gliederung abschließend die neun Beispielpfade, fügen Sie ein Geschwisterelement ein und bestätigen Sie, dass der betroffene Zweig wie erwartet neu nummeriert wird. Sobald diese Prüfungen in Ihrem Browser bestanden sind, ersetzen Sie die synthetischen Bezeichnungen und behalten Sie dabei die Verschachtelung und Quellreihenfolge bei.

Quellen