Frage zum Wiki-Artikel „Hybride_Nummerierung“

[nix]

Safari hat mich gerade eben „angemeckert“. Weil ich in einer Klasse mehr als ein counter-reset bzw. `counter-increment˚ nacheinander notiert hatte. Nach dem Herumstöbern habe ich nun herausgefunden, daß das alles „in eine Zeile“ gehört: etwas weiter unten wird es klar:

…
The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

will only reset 'imagenum'. To reset both counters, they have to be specified together:

H1 { counter-reset: section -1 imagenum 99 }
…

Auch der dann folgende Abschnitt, 12.4.1, ist (in ähnlicher Hinsicht) interessant: “Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance …”

Dazu habe ich hier im Wiki nichts entdeckt. Immerhin: auch nichts, das das Gegenteil aussagen würde.

[Rolf B]

Hallo nix,

Edit: Ignore this 🐄💩 – den Test hätte ich nicht mit 0 machen dürfen.

mich deucht, dass tutorialspoint da irrt oder veraltete Infos hat oder die Aussage zumindest nicht für Chrome zutrifft. Ich finde auch keine entsprechende Aussage in der Spec oder bei Mozilla.

In meinem Versuch haben

section {
  counter-reset: A 0;
}
section {
  counter-reset: B 0;
}

section {
  counter-reset: A 0;
  counter-reset: B 0;
}

section {
  counter-reset: A 0 B 0;
}

alle den gleichen Effekt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

mich deucht, dass tutorialspoint da irrt oder veraltete Infos hat oder die Aussage zumindest nicht für Chrome zutrifft.

Nope, der Irrtum liegt bei dir.

In meinem Versuch

Versuch mal, kein Nerd zu sein 😆 und bei 1 anfangen zu zählen. Du siehst den Unterschied zwischen

section {
  counter-reset: A 1;
  counter-reset: B 1;
}

und

section {
  counter-reset: A 1 B 1;
}

? (kleine Hilfe)

Im ersten Fall überschreibt die zweite Deklaration die erste, wie es die Kaskade vorsieht. A wird nicht gesetzt, ist also auf dem Defaultwert 0. (Das erklärt, warum es dir bei deinem Versuch nicht aufgefallen ist.)

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

🤓

Autsch.

Rolf

[Rolf B]

Hallo nix,

wer etwas kapieren will, sollte die Doku dazu schreiben.

Das habe ich mir zu Herzen genommen und der von Dir verlunkenen Seite ein Kapitel "Wie Zähler funktionieren" angefügt. Ich bitte um Peer Review!

Rolf

[nix]

Mehr als erwartet (und ich bin sogar über das bislang ignorierte counters gestolpert.

Was schwerer im Magen liegen dürfte: das „Erbrecht“ da drin. Die „nachfolgende Geschwister“. Solche Dinge, meine ich, wären mit etwas Grafik („angemalte div“ dürften weitgehend genügen und könnten sogar das, was sie erzählen sollen, „in den Genen tragen“; nach dem Motto „Quelltext ansehen und verstehen“) leichter verdaulich.

Was mir gerade noch einfällt: wer „so etwas“ als, na, sagen wir mal, Vertragstext ins Web stellt und dann, warum auch immer (weil die Darstellung, das Heruasstellen, von einzelnen Punkten gewünscht ist?) ab und an mit display: none spielt … bemerkt das nicht unbedingt selber („wenn da in der dritten Unterkategorie in der siebten Rubrik mittendrin …“), trägt aber später, wenn es ums „Verhandeln des Vertrages“ geht, sicher zu mancher Verwirrung bei. Das könnte hier und vielleicht „beim display“ erwähnt werden.

[Rolf B]

Hallo nix,

Ja, über dieses Erbrecht erbricht man sich erstmal. Aber wer das erbracht hat, hat sich durchaus was dabei gedacht. Steht auch so im Text.

Bilder sind nicht unbedingt meine Stärke. Wenn du ein paar schicke SVGs dazu beisteuern kannst?

Es ist ein Wiki…

Nachtrag: ich habe verstanden, dass Du Schwierigkeiten darin siehst, das auf einer realen Seite so einzusetzen, dass der Brauser das tut, was Du von ihm willst. Okay. Das ist nicht nur bei Countern eine Hürde.

Die Sichtbarkeit ist noch eine andere Sache. display:none nimmt das Element aus dem Layout-Prozess komplett heraus, deshalb greift in solchen Elementen counter-increment nicht. Ist ja auch gut so, sonst hätte man eine Lücke in der Nummerierung.

Es gibt aber auch visibility:hidden. Solche Elemente werden layoutet, damit ihre Größe bekannt ist. Und damit wird auch ein counter-increment darin aktiv.

Und um die Verwirrung komplett zu machen, gibt es noch Versteckspiele wie opacity:0 oder das Eigenschaften-Set .visually-hidden, wie wir es zum Beispiel im Artikel zu Dropdown-Menüs vorstellen. Auch solche Elemente sind counter-wirksam.

Also – ja – man muss aufpassen, was man tut.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die Sichtbarkeit ist noch eine andere Sache. display:none nimmt das Element aus dem Layout-Prozess komplett heraus, deshalb greift in solchen Elementen counter-increment nicht. Ist ja auch gut so, sonst hätte man eine Lücke in der Nummerierung.

Es gibt aber auch visibility:hidden. Solche Elemente werden layoutet, damit ihre Größe bekannt ist. Und damit wird auch ein counter-increment darin aktiv.

Hier anzusehen.

Also – ja – man muss aufpassen, was man tut.

Die (Binsen-)Weisheit würde ich nicht auf counter beschränken. 😏

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

warum zeigst du das mit divs? Das passiert mit li Elementen genauso.

Rolf

[Gunnar Bittersmann]

@@Rolf B

warum zeigst du das mit divs? Das passiert mit li Elementen genauso.

Ich wollte den CSS-Counter mit Elementen zeigen, die nicht schon einen innehaben, den man mit CSS erst ausschalten müsste.

Dass man üblicherweise die 1. Regel der (Nicht-)Verwendung von ARIA befolgen sollte, schrub ich ja dazu.

🖖 Живіть довго і процвітайте

[nix]

Natürlich ist das nicht auf counter beschränkt. Aber „laut AGB Punkt 3.7 Abschnitt 5 …“ „Herr Richter, …“ (Fummelei mit, direkt oder indirekt, display, …) „… sehen Sie, wie diese #### auch Sie belügt: die AGB haben übrerhaupt nur zwei Punkte und überhaupt keine Abschnitte …“

Anders gesagt: „man sieht das blaue und das grüne Rechteck, aber das unsichtbare?“. Selbst „ein gelber Kreis“ verrät es nicht.

Aber „3. 7 / 5“ verlangt nach einer „Abwesenheitserklärung“, nicht nach frischen Täuflingen mit anderen Namen.

Die nicht gezeigten grafischen Elemente fallen beiden, dem vermeintlichen Verursacher sowie dem verhinderten Rezipienten, nicht weiter auf. Die Lücke(n) in den Nummern (o. ä.) aber vielleicht „nur“, dann aber den Rezipienten.

[Rolf B]

Hallo nix,

wenn Du deutlich machtest, wovon Du da eigentlich redest, könnte Dir vielleicht auch jemand folgen. Ich jedenfalls nicht.

Rolf

[nix]

Nun, „im richtigen Leben“ ist es ja (nicht zuletzt bei juristisch relevanten Dingen) üblich, sich auf vermeitnlich feste „Anker“ zu beziehen. Teilweise (Bibeltexte) werden sogar die „Verse“, oft auch „nur“ die Zeilen dabei mit verwendet. Und wenn nun irgend jemand sich auf eine entsprechende Stelle einer Webseite bezieht, die aber aus verschiedensten Gründen immer wieder anders numeriert wird …

Also beispielsweise, weil „A“ gerade die Abschnitte 3-7 und 9 uninteressant findet, die also dank freundlicher Gestaltung ausblendet, sie so mit display: none versieht, „B“ aber ob der Diskussion und der intensiven Suche nach der Stelle alles ansieht, kein none platziert hat — schon ist’s geschehen.

… kann man mit nur etwas Glück lange und sinnfrei da zumindest aneinander vorbei reden und schreiben.

Daß display: none sich auch so auswirkt, sollte nahe einem „nimmt x aus dem Elementfluß“ erwähnt werden. Meine ich jedenfalls.

[Rolf B]

Hallo nix,

Danke für die Erklärung. Das Thema heißt also counter vs Anzeigefilter.

Interessant, das Szenario ist mir bisher nicht eingefallen.

Rolf

[Matthias Scharwies]

Servus!

Hallo nix,

Danke für die Erklärung. Das Thema heißt also counter vs Anzeigefilter.

Ich finde, dass Anker (= Links, Verweise) und die Kapitel- oder Listenzählung im Netz zwei verschiedene Dinge sind.

So hat csswg.org: https://drafts.csswg.org/css-fonts-4/#font-weight-prop die Kapitelzählung eben nicht in der URL integriert.

Herzliche Grüße

Matthias Scharwies

[nix]

Aber sie erleiden ein doch ähnliches Schicksal: wenn das gesuchte „:target“ einem display: none anheim gefallen ist, sollte es ja auch „sinnfreie Diskussionen“ dazu geben. Dann, da, aber zwischen Client und Server.