Counter und Vererbung

[Rolf B]

Hallo alle,

ausgehend von Nixens Counterei habe ich nochmal versucht, das Wiki zu verbessern, und kratze mich am Kopf. Es ist natürlich wieder mal ein Edge Case, aber trotzdem...

Dieses Beispiel:

<ul>
<li id="A">tricorder</li>
<li id="B">flux coupler <span>(or coil-spanner?)</span></li>
<li id="C">self-sealing stem bolt</li>
</ul>

mit diesem CSS

ul { counter-reset: FOO 17; }
li { counter-increment: FOO; }

#B span { counter-reset: FOO 88; }

li::after { content: " - " counters(FOO, '/'); }
span::after { content: " - " counters(FOO, '*'); }

(-> Fiddle)

Gemäß Spec sollte der in #B span erzeugte FOO Counter den FOO-Counter aus dem ul-Element überlagern. D.h. eine counters()-Ausgabe innerhalb dieses span-Elements darf zwei Werte zeigen. Außerhalb dieses Span hingegen…

Ebenfalls gemäß Spec sollte ein nachfolgendes Geschwisterelement dieses span den FOO-Counter des Elternelements erben. Counter aus dem vorhergehenden Geschwisterelement sollten nur dann geerbt werden, wenn es keinen gleichnamigen Zähler im Elternelement gibt (Inheriting Counters).

Das li::after Element im Listenelement #B sollte demnach den FOO Counter aus dem span nicht übernehmen und nur "19" anzeigen. Chrome und Firefox geben mir aber "19/88" aus, d.h. das im span erzeugte FOO wird an seine Geschwisterelemente weitervererbt.

Das gezeigte Verhalten entspricht der Aussage im vorherigen Spec-Abschnitt (Nested Counters and Scope): Ein Counter gilt für seine Kind-Elemente und seine nachfolgenden Geschwisterelemente.

Aber nach meinem Verständnis widerspricht es den formalen Vererbungsregeln der Spec, wie sie in Inheriting Counters aufgeschrieben sind.

Ist die Spec da widersprüchlich oder verstehe ich sie nur nicht?

Rolf

[Rolf B]

TIL: Tab Atkins hat einen Hirnfurz gelassen. ÜBEL riechend.

Denn: der Firefox verhält sich etwas anders, ABER NUR BEI LISTEN.

Definiert man den inneren FOO auf #B und nicht auf #B span, dann überträgt Chrome ihn auf das li#C. Firefox hingegen nicht.

Tab Atkins hat die von mir zitierte merkwürdige Vererbungsregel offenbar anlässlich zu Issue 5477 2020 in die Spec reingeschrieben (Quelle) und nur Firefox setzt es bisher um. Und auch nur für List-Items. Und das nur deshalb, weil es eine Masse Leute gibt, die zu blöd sind, Listen richtig zu schachteln:

<ol>
<li>Eins</li>
<li>Zwei</li>
<ol>
<li>Eins</li>
<li>Zwei</li>
</ol>
<li>Drei</li>
</ol>

Das ist invalides HTML, und es führt in Chrome dazu, dass "Drei" mit "2.3" nummeriert wird, wenn man die Zähler mit counters(list-item, '.') selbst ausgibt. Durch die Spec-Änderung soll das gefixt werden. Korrektes HTML würde das Problem nicht entstehen lassen - aber weil wohl viele HTML Editoren sowas generieren, hält man es für unpraktikabel, hier einen Anwenderfehler zu konstatieren und ändert lieber die Spec. AAARRRGH!!!!

Dammit, wie soll man das denn sinnvoll erklären? Ich hab's mal in die Diskussion zum Issue 5477 gegeben und das Fiddle dafür etwas erweitert.

Rolf

[Gunnar Bittersmann]

@@Rolf B

das Fiddle dafür etwas erweitert.

BAR=' counters(FOO, '/')? Das sollte BAR=' counters(BAR, '/') heißen?

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

yup. Fixed.

Bin auf deine Meinung zum Hirnfurz gespannt.

Nix nix nix, was hast Du da wieder mal angerichtet 😉

Rolf

[Gunnar Bittersmann]

@@Rolf B

Bin auf deine Meinung zum Hirnfurz gespannt.

Da muss ich mich erstmal einlesen. Kann mich nicht erinnern, je mal was mit Countern gemacht zu haben. 😉

Kwakoni Yiquan

[nix]

Angerichtet? Drüber gestolpert bin ich, würde ich sagen. Denn das Verhalten ist (war?) ja schon da. Gesehen hat’s halt niemand — außer „meinen Füßen“.

[Gunnar Bittersmann]

@@Rolf B

Und auch nur für List-Items. Und das nur deshalb, weil es eine Masse Leute gibt, die zu blöd sind, Listen richtig zu schachteln:

Es ist ein Feature von HTML, dass Webseiten auch bei invalidem HTML dargestellt werden. Manchmal bin ich geneigt zu denken, es ist ein Bug. 😉

<ol>
<li>Eins</li>
<li>Zwei</li>
<ol>
<li>Eins</li>
<li>Zwei</li>
</ol>
<li>Drei</li>
</ol>

Das ist invalides HTML, und es führt in Chrome dazu, dass "Drei" mit "2.3" nummeriert wird, wenn man die Zähler mit counters(list-item, '.') selbst ausgibt. […] Korrektes HTML würde das Problem nicht entstehen lassen

Beides zu sehen in diesem Codepen.

Kwakoni Yiquan