hgroup + CSS-Counter funktioniert nicht

Padina · Screenshot 2025-05-17 205347.png

Ich bekomme ein merkwürdiges Counter-Verhalten, sobald ich mehrere <hgroup>-Tags einsetze. Ist das ein Feature oder ein Bug? Wenn man die hgroup-Tags im HTML löscht, läuft bei der Kapitelnummerierung alles wie erwartet.
Das gleiche unerwartete Verhalten tritt auch im Chrome auf.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Überschriften-Nummerierung</title>
    <style>
        body {
            counter-reset: chapter;
        }

        h1 {
            counter-increment: chapter;
            counter-reset: subchapter;
        }

        h2 {
            counter-increment: subchapter;
            counter-reset: subsubchapter;
        }

        h3 {
            counter-increment: subsubchapter;
            counter-reset: lastchapter;
        }

        h4 {
            counter-increment: lastchapter;
            counter-reset: lastsubchapter;
        }

        h5 {
            counter-increment: lastsubchapter;
        }

        h2::before {
            content: counter(subchapter) " ";
            font-weight: bold;
        }

        h3::before {
            content: counter(subchapter) "." counter(subsubchapter) " ";
            font-weight: bold;
        }

        h4::before {
            content: counter(subchapter) "." counter(subsubchapter) "." counter(lastchapter) " ";
            font-weight: bold;
        }

        h5::before {
            content: counter(subchapter) "." counter(subsubchapter) "." counter(lastchapter) "." counter(lastsubchapter) " ";
            font-weight: bold;
        }
    </style>
</head>
<body>
<hgroup>
    <h1>Kapitelüberschrift</h1>
</hgroup>
<hgroup>
    <h2>Erstes Unterkapitel</h2>
</hgroup>
<h3>Erster Abschnitt</h3>
<h4>Detail 1</h4>
<h5>Unterdetail</h5>

<h3>Zweiter Abschnitt</h3>
<h4>Detail 2</h4>

<h2>Zweites Unterkapitel</h2>
<h3>Erster Abschnitt</h3>
<h4>Detail 1</h4>
<h3>Erster Abschnitt</h3>
<h4>Detail 1</h4>
<h5>Unterdetail</h5>

<h3>Zweiter Abschnitt</h3>
<h4>Detail 2</h4>

<h2>Zweites Unterkapitel</h2>
<h3>Erster Abschnitt</h3>
<h4>Detail 1</h4>
</body>
</html>

Alles anzeigen

Sören Hentzschel

Hallo,

das hat nichts mit den hgroup-Element zu tun. Das Verhalten ist mit jedem anderen HTML-Element das gleiche. Ich empfehle die MDN web docs als Lektüre zur korrekten Verwendung der CSS Counter:

Using CSS counters - CSS: Cascading Style Sheets | MDN

CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the…

developer.mozilla.org

Ich verschiebe das Thema in den Smalltalk-Bereich, weil es nichts mit Firefox zu tun hat und sich alle Browser gleich verhalten.

Padina

Nur das alle Browser es so machen, bedeutet ja nicht unbedingt, dass das Verhalten sinnvoll ist. Vielleicht sind ja die Browser-Tests buggy. und die Browser werden Test-Driven programmiert. Ein Bug in der Definition bleibt weiterhin in meinen Augen ein Bug; lediglich das Herangehen zur Korrektur muss sich dann ändern.

Danke für den Hinweis auf die Erläuterungen bei MDN. Leider habe ich dadurch auch nicht verstanden, warum ind divh1-h1.png und dih1-divh1.png plötzlich im h3 ein Counter auf 0 zurückgesetzt wird, der im vorhergehenden h2 noch mit 1 angezeigt wurde. Habe ich hier etwas flasch verstanden?

Für den Definitionsfehler bei allen Browsern scheint es notwendig zu sein, dass sowohl das erste h1-Tag wie auch das erste h2-Tag inkludiert sind (hier in ein div). Kann mir jemand einmal erklären, warum der Fehler nicht auftritt, wenn das erste h1 nicht in ein div inkludiert ist. (siehe h1-divh1.png und h1-h1.png)

Ich hatte den Counter so verstanden, dass er als Singleton im Dokument fungiert und unabhängig von der DOM-Struktur funktioniert, wie das integrierte DIV-Beispiel es ja auch zeigt, wobei ich die Konfliktösung bei '4.1. div' und '4.1. subdivv' im Screenshot auf den ersten Blick ohne tieferes Hineindenken nachvollziebar erscheint.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Überschriften-Nummerierung</title>
    <style>
        div {
            counter-increment: divvy;
            counter-reset: subdivvy;

        }
        div div {
            counter-increment: subdivvy;
            /*counter-reset: subchapter;*/
        }
        body {
            counter-reset: chapter;
        }

        h1 {
            counter-increment: chapter;
            counter-reset: subchapter;
        }

        h2 {
            counter-increment: subchapter;
            counter-reset: subsubchapter;
        }

        h3 {
            counter-increment: subsubchapter;
            counter-reset: lastchapter;
        }

        h4 {
            counter-increment: lastchapter;
            counter-reset: lastsubchapter;
        }

        h5 {
            counter-increment: lastsubchapter;
        }

        div::before {
            content: counter(divvy) ": ";
            font-weight: bold;
        }
        div div::before {
            content: counter(divvy) "." counter(subdivvy) ": ";
            font-weight: bold;
        }
        h2::before {
            content: counter(subchapter) " ";
            font-weight: bold;
        }

        h3::before {
            content: counter(subchapter) "." counter(subsubchapter) " ";
            font-weight: bold;
        }

        h4::before {
            content: counter(subchapter) "." counter(subsubchapter) "." counter(lastchapter) " ";
            font-weight: bold;
        }

        h5::before {
            content: counter(subchapter) "." counter(subsubchapter) "." counter(lastchapter) "." counter(lastsubchapter) " ";
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    div
    <div>
        subdivv
    </div>
</div>
<!--<div>div für h1-->
    <h1>h1: Kapitelüberschrift</h1>
<!--</div>-->
<div>
    div
    <div>
        subdivv
    </div>
</div>
<div> ups-outer-div
    <div>
        div
        <div>
            subdivv
        </div>
    </div>
</div>
<div>div für h2
    <h2>h2: Erstes Unterkapitel</h2>
</div>
<h3>h3: Erster Abschnitt</h3>
<h4>h4: Detail 1</h4>
<div>
<h5>h5: Unterdetail h5</h5>
</div>
<h3>h3: Zweiter Abschnitt</h3>
<h4>h4: Detail 2</h4>

<h2>h2: Zweites Unterkapitel</h2>
<div>div für h1
    <h1>h1: Kapitelüberschrift</h1>
</div>
    <div>div
    <h2>h2: Erstes Unterkapitel</h2>
</div>
<div>div
<h3>h3: Erster Abschnitt</h3>
</div>
<div>div
<h4>h4: Detail 1</h4>
</div>
<div>div
    <h5>h5: Unterdetail h5</h5>
</div>
<h3>h3: Zweiter Abschnitt</h3>
<h4>h4: Detail 2</h4>

<h2>h2: Zweites Unterkapitel</h2>

<h3>h3: Erster Abschnitt</h3>
<h4>h4: Detail 4</h4>
<div>div
    <h5>h5: Detail 5</h5>
    <h6>h6: Detail 6</h6>
</div>
<h3>h3: Erster Abschnitt</h3>
<h4>h4: Detail 1</h4>
<h5>h5: Unterdetail</h5>

<h3>h3: Zweiter Abschnitt</h3>
<h4>h4: Detail 2</h4>

<h2>h2: Zweites Unterkapitel</h2>
<h3>h3: Erster Abschnitt</h3>
<h4>h4: Detail 1</h4>
</body>
</html>

Alles anzeigen

Sören Hentzschel

Zitat von Padina

Nur das alle Browser es so machen, bedeutet ja nicht unbedingt, dass das Verhalten sinnvoll ist.

Dass sich ausnahmslos alle Browser-Engines so verhalten, bedeutet, dass das mit absoluter Sicherheit das korrekte Verhalten gemäß Spezifikation ist. Und damit erübrigt sich jede Diskussion darüber, ob man das Verhalten mag oder nicht. Du sprichst mehrfach von einem „Bug“ und einem „Fehler“. Das ist es nicht. Der Standard funktioniert schlicht und ergreifend nicht so, wie du glaubst.

Zitat von Padina

Vielleicht sind ja die Browser-Tests buggy. und die Browser werden Test-Driven programmiert.

Test Driven Development bedeutet lediglich, dass die Tests vor dem Code geschrieben werden. Das ändert nichts an den Ergebnissen, die von den Tests erwartet werden. Und so oder so findet sowohl die Entwicklung der Engines als auch der Tests durch Menschen statt, die selbstverständlich prüfen, dass die Tests das abbilden, was die Spezifikation verlangt. Tests werden ja auch nicht völlig blind geschrieben.

Zitat von Padina

und unabhängig von der DOM-Struktur funktioniert

Das kann überhaupt nicht sein. Im Gegenteil geht es bei diesem Feature ja genau darum, abhängig von der DOM-Struktur eine Zählung vorzunehmen.

Vielleicht hilft dir folgende Erklärung mit Beispiel beim Verständnis:

https://stackoverflow.com/a/20839693

Ansonsten wendest du dich besser an ein Webentwickler-Forum. Denn ein Firefox-Problem liegt wie gesagt keines vor.

2002Andreas 17. Mai 2025 um 22:15