nix: Frage zum Wiki-Artikel „counter()“

problematische Seite

Die Preisfrage lautet: wer zählt (hier; s. u.) richtig? Schnell ein Stück heruasgeschnittener und auf Wesentliches gekürzter Quelltext:
Stylesheet:

body {
	&:not(:has(:target)),
	&:has(p.default:target) {
		#extra { display: none; }
		#default { display: block; }
	}
	&:has(p.extra:target) {
		#extra { display: block; }
		#default { display: none; }
	}
	> article {
		counter-reset: total;
		&::after {
			color: purple;
			font-size: x-small;
			font-family: fantasy;
			content: "— [" counter(total) "] —";
}}}

body:has(.extra:target) {
	& li.extra {
		display: inline;
}}

ul { display: contents; }
li { list-style-type: none; }
name-group {
	display: inline; counter-reset: nameIndex;
	li::after {
		display: inline-block;
		counter-increment: nameIndex;
		content: "(" counter(nameIndex) ")"; vertical-align: sub;
}}

article {
	display: flex; flex-flow: row wrap;
	li {
		display: inline;
		&:not(.Alias) { counter-increment: total; }
		&.extra { display: none; }
}}

HTML:

<!DOCTYPE html>
<html><head><link rel="stylesheet" type="text/css" href="index.css" /></head>
	<body>
		<header>
			<p id="default" class="default"><a href="#extra">Basis-Info</a></p>
			<p id="extra" class="extra"><a href="#default">Erweiterte Infos</a></p>
		</header>
		<article>
			<ul>
				<li class="default"><a href="Adb….html">Ade…</a></li>
				<name-group>
					<li class="default"><a href="Ade….html">Ade…</a></li>
					<li class="default"><a href="Ade….html">Ade…</a></li>
				</name-group>
				<li class="default"><a href="Akr….html">Akr…</a></li>
				<li class="default"><a href="Ale….html">Ale…</a></li>
			</ul>
			<ul>
				<name-group>
					<li class="extra"><a href="Bell….html">Bel…</a></li>
					<li class="default"><a href="Bell….html">Bel…</a></li>
				</name-group>
				<li class="default"><a href="Bip….html">Bip…</a></li>
			</ul>
		</article>
	</body>
</html>

Sprich: eine Art Katalog(inhaltsverzeichnis), das beim Klicken auf den Header ggf. mehr Infos ausspuckt.
Das Problem aber: bei den Indizes (name-group li::after) sind sie sich noch einig, aber beim Aufklappen zählt Firefox (IMO korrekt) hoch, Safari ignoriert die Extra-Einträge, zählt sie nicht (article::after).

BTW: display: hidden und Screen-Reader … das Verstecken von Infos stellt für die eigentlich welches Problem dar? Sehende sehen nix, was dann auch nicht vorgelesen wird? Ich kenne solche Gerätschaften ja nicht, kam nur beim Nachdenken darüber ins Stirnrunzeln …

  1. problematische Seite

    Servus!

    Die Preisfrage lautet: wer zählt (hier; s. u.) richtig? Schnell ein Stück heruasgeschnittener und auf Wesentliches gekürzter Quelltext:
    Stylesheet:

    Warum online-Beispiele besser als das Posten von Code sind!

    BTW: display: hidden und Screen-Reader …

    display: hidden?

    Matthias Scharwies

    --
    Die Signatur findet sich auf der Rückseite des Beitrags.
    1. problematische Seite

      Hidden secrets? Ich hatte es mir ja gedacht. Kaum ein paar Minuten nach dem Abschicken. Natürlich war display: none gemeint … 😖

  2. problematische Seite

    @@nix

    Schnell ein Stück heruasgeschnittener und auf Wesentliches gekürzter Quelltext

    Nein, ich werde ganz gewiss keine Copy-and-paste-Orgie veranstalten, um dein Problem nachvollziehen zu können. Die Erstellung eines Online-Beispiels ist deine Aufgabe; das solltest du inzwischen wissen.

    Kwakoni Yiquan

    --
    Ad astra per aspera
    1. problematische Seite

      „Es kann nur einen geben“? Ich denke ja, daß irgendwann demnächst mit einem Update die Frage sowieso geklärt wird. Und mit einem Beispiel wie gewünschtk wäre immerhin auch unsichtbar, was da so nebenher an „ich hab’ zugehört“ sichtbar ist. Wobei ich mir vorstellen kann, daß „mein Teletext-Button“ Interessenten finden könnte. Vielleicht auch das „Inhaltsverzeichnis ohne Datenbank“ (was aber nach einem „etwas intelligenten HTML-Editor“ verlangt).

  3. problematische Seite

    Hallo nix,

    • Eine Sichtbarkeitssteuerung mit :target ist genauso scheußlich unzugänglich wie eine Steuerung mit Checkbox- oder Radiobutton-Hack. Muss das sein? Natürlich hast Du mit der target-Steuerung, die extra- oder default-Sicht direkt per URL anzufordern. Ist das ein wichtiges Feature für Dich?

    • Ein ul Element darf nur li Elemente enthalten. Ein name-group-Element nicht. D.h. dein HTML ist nicht valide. Möglicherweise hilft Dir eine Klasse "begin-group" oder so, die den Group-Zähler zurücksetzt. Oder du schachtelst eine weitere Liste hinein, die name-group ist ja schließlich eine innere Liste. Du musst Dir auch überlegen, wie eine name-group zugänglich sein könnte - derzeit ist sie es gar nicht, ein custom element ist ohne spezifische Rollenzuweisung reine Präsentation.

    • die default-Klasse auf den non-extra li Elementen scheint mir unnötig, sie bläht nur das Markup auf. Kannst Du die weglassen?

    Ansonsten: Ich nehme an, dass der Total-Zähler am Ende 7 oder 8 zeigen soll, je nachdem, ob man nur die default-Elemente sieht oder auch das Extra-Element. Ich habe einen Minimaltest erstellt, ohne deinen Code abzuschreiben, bei mir werden Counter in einem hidden-Element nicht mitgezählt. Mache ich es – via Checkbox-Hack oder :target-Hack – sichtbar, ändert sich der Zähler. In Chrome und Firefox. Safari hab ich nicht.

    Versuch's doch auch erstmal mit Minimalbeispielen ohne CSS Wüste, ohne custom-Elemente und ohne :target-Hack.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      So unzugänglich, wie sich Rätselt gelegentlich gebenⸯ — der Teil ist einigermaßen gewollt. Und daß es da zwei Klassen gibt hat auch einen Grund: die Inhalte tun sich sonst schwer, ihr Erscheinungsbild entsprechend anzupassen. Aber das habe ich hier weggelassen, das wären noch an 200 Zeilen CSS mehr gewesen.

      Meine name-group funktioniert erst mal in den Browsern. Und entstanden ist die aus mehreren Experimenten mit „so geht’s nicht“ und dem Bedürfnis, mein Editor (der die Dinger als CustomElment auch brav faltet, so daß die alphabetische Liste angenehmer zu handhaben ist) möge mir doch auch etwas helfen. Aber stimmt, so wie das jetzt da steht, sollte ich wohl wiriklch eine Liste draus machen. — Aber: immerhin kann ich jetzt mit zweimal Suchen&Ersetzen alle entsrpechenden Stellen auf einen Schlag abändern: (<(/?)name-group.*?>) ⇉ <!--\1--><\2ul> und name-group ⇉ li>ul. (Das bringt Safari aber auch nicht von seiner Sichtlosigkeit ab.)

      Wegen der Zugänglichkeit: einerseits ist nicht zu befürchten, daß die Rezipienten da mit anderen Dingen als Gucken und Mausschubsen dran gehen werden. Zum anderen: so lange es noch klemmt und kneift ist es noch kein Rohbau. Tapeziert wird erst, wenn wenigstens die tragenden Wände sicher stehen. Was die angeht: so ganz zufrieden bin ich noch nicht. Und ein oder zwei entsprechende Features scheinen ja in der HTML/CSS-Schmiede gerade bearbeitet zu werden.

      Und ja. total sollte die sichtbaren Einträge, die obendrein kein Alias darstellen, zählen. Firefox machts, Safari (incl. aktueller Tech-Preview) sieht beim Auklappen nicht mehr. — Lt. Mehrheitsentscheidung habe ich also richtig vermutet.


      ⸯ: vor einiger Zeit hatte ich da mal nachgefragt. Wegen eines „Teletext-Buttons“, der verborgenes ent- oder verhüllt. Und hab’ dann ein :has() erhalten. Danke!

      1. problematische Seite

        Hallo nix,

        Safari (incl. aktueller Tech-Preview) sieht beim Auklappen nicht mehr.

        Dann solltest du versuchen, das Beispiel auf das absolute Minimum abzustrippen. Verzichte auf jede Deko, stelle nur das dar, was für das Problem unbedingt nötig ist. Mach einen Codepen oder ein Fiddle daraus, und reiche einen Bug bei Safari ein.

        Vielleicht vergleichst du das Verhalten auch mit dem von Checkbox-Hack oder details Element.

        Meine Erfahrungen bei Firefox und Chrome sind, das gut dargestellte Bugs auch bearbeitet werden. Du kannst das Bugbeispiel gerne auch vorher uns zum Review zeigen. Wenn man darin nur 2x klicken muss, um das Problem zu sehen, gucken sich Jürgen oder Gunnar das Ding sicher gerne an.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Danke. Aber zusammengestrichen habe ich das schon. Der Unterschied ist geblieben. Und weil danach noch ein kleine Stückchen Unsicherheit blieb, dache ich, a) eine andere Meinung kann nicht schaden und b) das Wissen darum könnte vielleicht ja vielleicht auch hilfreich sein.

          Gut, dann werde ich mal ein kleines Beispiel für den Bug-Report schnitzen.

          1. problematische Seite

            Hallo nix,

            das, was Du uns vorgelegt hast, ist noch viel zum umfangreich für eine Bugmeldung.

            Schmeiß alle Spezifika für deine Anwendung weg, mach einfach eine Liste mit 5 Einträgen, wo 2 Elemente eine Klasse "x" haben oder so. Und obendrüber machst Du EINEN Link mit id="show" href="#show" und im CSS dann #show:not(:target) ~ ul li.x { display:none; }.

            Dazu dann noch der Counter für die List-Items: counter-reset auf dem ul, counter-increment auf den li, und im ul::after den Wert zeigen.

            Mehr nicht. Keine Flexbox, Inline, Gruppen - das muss alles weg für die Bug-Demo.

            Ja, während ich das hier geschrieben habe, wäre ich mit dem Beispiel dreimal fertig gewesen. Aber wir wollen Dir ja beibringen, wie man richtige Beispiele macht 😉

            Rolf

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              Danke für die Tipps! Aber: den Report verkneif’ ich mir vorerst noch. Denn: beim Basteln des Beispiels habe ich noch ein paar (seltsame?) Dinge gefunden, die ich mir erst noch zusammenreimen muß. Der vorläufige Eindruck: es scheint so etwas wie eine Frage dieses scopes (evtl: unterscchiedliche Sichtweisen des Brwosers auf die Strukturen des CSS und jene des HTML) zu sein: anscheinend ist es (auch?) von anderen Dingen (Klassen?) abhängig, wann die Browser so etwas wie eine lokale Instanz von denen (automatisch – immerhin gib es hier counter-reset nur je einmal) aufbauen.

              Je nachdem, was ich ausprobiert habe, verhalten sich die beiden hier mal gleich, mal unterschiedlich. Und auch wenn der erste Eindruck gegen Safari sprach: es könnte durchaus auch Firefox sein, der da dann nur anscheinend richtig zählt.

              Da werde ich erst mal ein paar stabile Fälle konstruieren müssen. Und mit denen an der Hand dann diesen „langen Marsch“ durch die Dokumentation antreten müssen.

              Ach ja: das mit dem einen Link — ich kopiere mir das gleich. Wenn auch erst mal nur als Kommentar ins bestehende CSS rein. Denn: ich bin ja erst mal beschäftigt.

            2. problematische Seite

              Aha-Effekt: es hat was mit dem CSS-Nesting zu tun. „Flachgebügelt“ (einzige Ausnahme: li steckt noch im ul) zälen sie beide wie erwartet.

              Weitere Entdeckung, Typ „könnte ggf. hilfreich sein“: counters() liefert in einer Liste zunächst auch nur das, was counter abgibt. Sobald eine Liste als Kind der Liste auftaucht, wird die Ausgabe „mehrstufig“. (Und wenn man obendrein bei der Unterliste das Einpacken in <li></li> vergißt, hört das nicht mehr auf, auch nach der mißglückten Unterliste wird mehrstufig gezählt — immerhin: die Browser stört dieser Fehler sonst – anscheinend – überhaupt nicht.)

              Aber: den Bug-Report kann ich wohl streichen. Denn die Quelle scheint eben in diesem Nesting begraben zu sein. Und zwar, grob schematisiert und ohne jeden störenden, ablenkenden, „sonstigen Kram“, so:

              element {
                ul { … }
                ul li { … }
                ul > li { … }
                .x ul { … }
              }
              

              Wenn die Listen/Unterlisten mit anderen Dingen „verziert“ sind (irgendwas mit weiteren Selektoren), meist nicht so offensichtlich, und diese „Zweige“ zwar aktiv sind (Auswirkungen bei der Gestaltung zeigen), dann bedeutet das nicht zwingend, daß die Counter da schon deshalb zählen. Und zu sehen bekommt man ja nur das Endergebnis: es zählt, es zählt nicht – aber warum wo? Wo nicht oder (auf einem „alternativen Weg“?) wo doch?

              Fazit: Nesting ist schon was Feines. Aber: nicht alles gehört da rein. Nur das, was aus der Hierarchie entsprechende Auswirkungen zeigen muß. „<p> ist kein Fall für ein „body { p { …}}“. Aber nicht, weil es (das CSS) „so ästhetischer selbst der Gestaltung dessen folgt, was damit selbst gestaltet werden soll“.

              1. problematische Seite

                @@nix

                Weitere Entdeckung, Typ „könnte ggf. hilfreich sein“

                Nein, das ist es nicht. Nicht, solange du es nicht schaffst, deine Gedanken verständlich zu äußern und mit einem anschaulichen Beispiel zu versehen.

                Kwakoni Yiquan

                --
                Ad astra per aspera
                1. problematische Seite

                  Nun, immerhin sieht man ggf. (wenn mit den Countern irgendwas schief läuft), ob man sich an der jeweiligen Stelle auf der Ebene befindet, in der man sich glaubt.

              2. problematische Seite

                Hallo nix,

                fällt mir grad auf:

                bist Du auf einem hinreichend aktuellen Safari? 17.2 oder höher? Andernfalls funktioniert nämlich dieses nicht:

                ul {
                   bla:blub;
                
                   li {
                      foo: bar;
                   }
                }
                

                Die ursprüngliche Nesting-Spec verlangte für nested rules mit Typselektor, dass ein & Kombinator davor geschrieben wird. Safari hat das erst mit v17.2 umgesetzt (Dezember 2023).

                ul {
                   bla:blub;
                
                   & li {
                      foo: bar;
                   }
                }
                

                Rolf

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  Ja, bin ich. Und wenn’s nur wäre, um in den “Feature Flags” nach "anchor" zu suchen.

                  Aktuell gibt es da "CSS Scroll Anchoring" – zum Testen. "masonry" ist da einen Schritt weiter: „Vorschau“.

                  Auch die Punkte „für Entwickler“ sind, was die anstehenden Neuigkeiten angeht, evtl. von Interesse.

                2. problematische Seite

                  Damit der Spaß auch niemals endet: hab’ im ursprünglichen Kram zwecks Eingrenzung(sversuch) einfach mal allen li ein ::before mit Zähler-Anzeige verpaßt. Das Ergebnis? Damit drin zählt Safari plötzlich ordentlich. Und Firefox? Der verweigert mir fürs ::before (aber nicht für die ::after) font-size (egal, ob absolut oder relativ; mit einer Ausnahme: "font-size: 0;" frißt er – und läßt damit auch nichts mehr sehen).

                  Ich glaub’, damit werde ich noch einige Spaß haben.

                  1. problematische Seite

                    @@nix

                    Damit der Spaß auch niemals endet: hab’ im ursprünglichen Kram zwecks Eingrenzung(sversuch) einfach mal allen li ein ::before mit Zähler-Anzeige verpaßt. Das Ergebnis? Damit drin zählt Safari plötzlich ordentlich. Und Firefox? Der verweigert mir fürs ::before (aber nicht für die ::after) font-size (egal, ob absolut oder relativ; mit einer Ausnahme: "font-size: 0;" frißt er – und läßt damit auch nichts mehr sehen).

                    Ich glaub’, damit werde ich noch einige Spaß haben.

                    Das glaube ich auch. Denn wenn du nicht zeigst, was du machst, kann man dir auch nicht sagen, was du falsch machst.

                    Also viel Spaß weiterhin!

                    Kwakoni Yiquan

                    --
                    Ad astra per aspera
                    1. problematische Seite

                      Mindestens ein Problem daran: wenn ich anfange, etwas „einzudampfen“, läßt sich „Fehlerchen“ nicht mehr sehen. Dabei geht bis jetzt jedesmal dieser „Knackpunkt“ verloren.

                      1. problematische Seite

                        @@nix

                        Mindestens ein Problem daran: wenn ich anfange, etwas „einzudampfen“, läßt sich „Fehlerchen“ nicht mehr sehen.

                        Die Erklärung könnte sein, dass der Fehler woanders liegt als du vermutet hattest.

                        Kwakoni Yiquan

                        --
                        Ad astra per aspera
                        1. problematische Seite

                          “Das glaube ich nicht, Tim“ — Oder: Bug-Report ist raus, das Eindampfen gelang (einigermaßen).
                          Was ich dabei noch gesehen habe und was mich irritiert (ich mag jetzt aber erst mal nicht mehr suchen): die erwähnten f::befores geben sich vom display:none ihres „Herrchens“ in beiden Browsern unbeeindruckt.

                          "FYI” — Falls doch jemand zu neugierig ist:

                          <html>
                          	<head>
                          		<style>
                          			.ext { display: none; color: cyan; }
                          			body {
                          				max-inline-size: calc(100vi - 12px);
                          				&:not(:has(:target)), &:has(p.dft:target) {
                          					#ext { display: none; }
                          					#dft { display: block; }
                          				}
                          				&:has(p.ext:target) {
                          					#ext { display: block; }
                          					#dft { display: none; }
                          				}
                          				&.ext li { display: none; }
                          				&:has(.ext:target) {
                          					& li.ext { display: revert; }
                          				}
                          			}
                          			header > p > a::before { color: orange; content: "click me >>> "; }
                          			ul { display: flex; }
                          			li { margin: 1ex; list-style-type: none; inline-size: max-content; }
                          			.yes li::before {
                          				font-size: 70%; color: yellow; background-color: blue;
                          				content: "(" counters(total, ":") ")";
                          			}
                          			ul.nGrp {
                          				display: inline flex;
                          				counter-reset: nameIndex;
                          				& li::after {
                          					display: inline-block;
                          					counter-increment: nameIndex;
                          					font-size: 75%; color: red; vertical-align: sub;
                          					content: "(" counter(nameIndex) ")";
                          				}
                          			}
                          			header {
                          				inline-size: 100%;
                          				font-size: 2rem; text-align: center;
                          			}
                          			article {
                          				counter-reset: total;
                          				padding: 1ex; margin: 1em;
                          				&::after {
                          					font-size: 3em; color: purple;
                          					content: "— [" counter(total) "] —";
                          				}
                          				li { counter-increment: total; }
                          				outline: 1ex groove purple;
                          			}
                          		</style>
                          		<title>Strange Safari-Count</title>
                          	</head>
                          	<body lang="de">
                          		<header>
                          			<hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup>
                          			<p id="dft" class="dft"><a href="#ext">More?</a></p>
                          			<p id="ext" class="ext"><a href="#dft">Less!</a></p>
                          			<p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p>
                          		</header>
                          		<article>
                          			<ul>
                          				<li class="dft"><p>A1</p></li>
                          				<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
                          				<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
                          				<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
                          				</li>
                          				<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
                          			</ul>
                          			<ul>
                          				<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
                          				<li class="dft"><p>B2</p></li>
                          				<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
                          			</ul>
                          		</article>
                          		<article class="yes">
                          			<ul>
                          				<li class="dft"><p>A1</p></li>
                          				<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
                          				<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
                          				<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
                          				</li>
                          				<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
                          			</ul>
                          			<ul>
                          				<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
                          				<li class="dft"><p>B2</p></li>
                          				<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
                          			</ul>
                          		</article>
                          	</body>
                          </html>
                          
                          1. problematische Seite

                            Hallo nix,

                            viel zu riesig, das guckt sich keiner an.

                            Für die Überschrift: Es heißt ::before , nicht :before 😉

                            „Different from Firefox“ ist irreführend
                            Korrekt ist: „Only in Safari“. Chrome zählt nämlich auch richtig. Und beim Firefox ist es tatsächlich so, dass die eine Spec-Änderung umgesetzt haben, die Blödsinn war und die von den anderen Browsern NICHT umgesetzt wurde (siehe meinen Counter-Thread von vorgestern). Der Hinweis „Different from Firefox“ könnte die Analysten dazu bringen, das Problem in dieser unterschiedlichen Implementierung zu verorten. Du hast aber ein counter-reset im article, so dass sich der FF-Unterschied nicht auswirkt.
                            Warum die A- und B-Liste?
                            Reicht da nicht eine?
                            Warum so viele Listenpunkte?
                            Reichen nicht ein oder zwei mit ext? Einer in der Subliste und einer außerhalb?
                            Warum die <p> Elemente um die Items?
                            Die blähen nur das Markup auf und erzeugen in der Ausgabe unnötig Margin
                            Warum class="dft"?
                            Für den Bug ist sie uninteressant und bläht nur das Markup auf.
                            Ohne unnötige Klassen ist das Markup so kompakt, dass es lesbar bleibt, wenn die Sublisten auf einer Zeile stehen.
                            Die & vor Typselektoren
                            Das war in Chrome nötig, einen geschachtelten Selektor, der als Typselektor begann, verstand er nicht. Das hat sich geändert. & li braucht man nicht mehr (bzw. wenn, dann muss man es auch überall verwenden). &.ext bleibt natürlich nötig.
                            Warum ein themenfremer Punkt?
                            Das ::before-Problem mag Dich interessieren, aber es hat mit den Countern nichts zu tun.
                            Hinweis 1
                            Falls Du im real-life nur 2 Ebenen hast, brauchst Du die Klasse nGrp nicht. li > ul reicht hin.
                            Hinweis 2
                            &.ext li { display: none; } wird übrigens deshalb nicht beachtet, weil Du kein li Element hast, das Kind eines Elements mit Klasse ext ist. Du hast höchstens li Elemente mit Klasse ext - aber die haben keine Kind-Listen.

                            Wie wär's hiermit?

                            Rolf

                            --
                            sumpsi - posui - obstruxi
                            1. problematische Seite

                              „Different from Firefox“ ist irreführend

                              Übler wäre es aber, würde ich da Browser mit in die Töpfe werfen, von denen ich nicht weiß, wie sie das halten.

                              Warum die A- und B-Liste?

                              Ohne die käme vmtl. die Frage, wieso mein Counter nicht in der Liste sondern davor eingebaut ist.

                              Das ::before-Problem

                              ist insofern interessant, weil Safari „mit ::before drin“ plötzlich richtig zählt. Warum? Weil es einen ursächlichen Zusammenhang gibt? Ich weiß es nicht. Aber: aus meiner Berufserfahrung weiß ich (nein, nicht mit – gewöhnlichen – Computern), daß nicht selten zusammenhanglos erscheinende Informationen denen, die da diese Zusammenhänge sehen können, durchaus hilfreich sein können.

                              &.ext li

                              ist aber doch kein &.ext>li ⁈

                              1. problematische Seite

                                Hallo nix,

                                Übler...

                                Schon klar, also schreib, was Du verbindlich weißt: FF V??? und Chrome V??? tun es, Safari V??? aber nicht.

                                Warum die A- und B-Liste?

                                Ohne die käme vmtl. die Frage, wieso mein Counter nicht in der Liste sondern davor eingebaut ist.

                                Versteh ich nicht. Du hast 2 articles, und darin je 2 Listen. Eine mit A1, A2, ..., eine mit B1, B2, …. Die Liste mit den B-Elementen bietet aus meiner Sicht keinen Mehrwert. Und der Total-Counter ist eh unter der Liste. Fühlst Du Dich von meiner abgespeckten Version verwirrt?

                                Das ::before-Problem

                                ist insofern interessant, weil Safari „mit ::before drin“ plötzlich richtig zählt.

                                Ja. Deswegen die beiden articles. Ich nehme an, dass das Anzeigen des total-Zählers zum Abruf des Zählerstandes führt und deshalb der Zähler in der Layoutphase korrekt aktualisiert wird. Nötig sollte das nicht sein, aber das wäre vermutlich der Würgherum: eine visuell versteckte counter()-Anzeige in den Listitems.

                                Aber das meinte ich nicht. Du hast ein <p> vorneweg, wo Du über Sichtbarkeiten von ::before-Elementen klagst. DAS gehört nicht rein. Und natürlich erbt ::before die Sichtbarkeit seines Elternelements nicht. Es wird einfach zusammen mit dem Elternelement ausgeblendet, und seine eigene Sichtbarkeit interessiert nicht mehr. Ein "display:block" auf einem Kindelement ist irrelevant, wenn das Elternelement ein "display:none" hat.

                                Rolf

                                --
                                sumpsi - posui - obstruxi
                                1. problematische Seite

                                  S: 17.3
                                  F: 122.0

                                  Und wg. der article: zwei wegen des Vergleichs. Und jeder davon soll die nicht vergrabenen li zählen. Alle darin auf einmal, nicht ul für ul.

                                  Und beim ::before — nun, wenn das li (oder sein Elternteil) display:none führt, dann muß man das ::before als Großelter ansehen? Denn als Kind würde es doch erben? — Irgendwie habe ich bei der Vorstellung ein Problem. Oder ist es der Begriff, der nicht paßt? Na, dann nennen wir es doch einfach „Familien-Verstecken“? Paßt aber dann auch nicht wirklich: das wäre ja hidden.

                                  Aber die Mail, die gerade während des Schreibens eingelaufen ist, gefällt mir. Ein kurzer Dank und ’ne hübsche Tracking-Nummer. (Wenn die Faktoren nicht so klein wären, die wäre direkt für PGP gut. — Fast schade, aber die Aufgabe ist eigentlich keine Herausforderung, weder für die Emulation, noch fürs Original.)

                                  1. problematische Seite

                                    Hallo nix,

                                    Und wg. der article: zwei wegen des Vergleichs.

                                    Sicher. Das hab ja sogar ich verstanden 😉

                                    Zum verwirrten Familienstammbaum:

                                    <style>
                                    li { display: none; }
                                    li::before { content: "Hallo "; display: block; }
                                    </style>
                                    ...
                                    <li>Welt</li>
                                    

                                    Das li ist das Elternelement, das ::before das Kind. Und wenn die Eltern nach Noneland verreisen (klingt wie 'ne schwedische Insel, hat aber ≈49600 anderslautende Googletreffer), nehmen sie alle Kinder mit. Restlos. Ohne Widerworte. Da können sie blockieren oder inlinern, solange sie wollen.

                                    Oder, um unser Wiki zu verlinken, display:none.

                                    ::after und ::before als Pseudoelemente sind übrigens unfruchtbar und deshalb stets und immer kinderlos. Es gibt keine Syntax, womit man ihnen Kinder anhängen könnte. Es gibt weder li::after::after, noch HTML im content-Attribut. Und auch keine DOM Methode zum Anfassen von Pseudoelementen[1].

                                    Weswegen sie auch nicht Großperson (m/w/d) von irgendwem oder -was sein können.

                                    Rolf

                                    --
                                    sumpsi - posui - obstruxi

                                    1. Irgendwas kitzelt meinen Hinterkopf, dass es da irgendwas gab. Irgendeine Methode hatte ein Flag, womit ich ein Pseudoelement kriege und nicht das Element selbst. Aber ich komm nicht mehr drauf. ChatGPT ist gut für solche unspezifischen Fragen. Aber er meint, da gäbe es nichts. Es sei denn, es sei nach Januar 2022 erfunden worden, davon wüsste er nichts. ↩︎

                                    1. problematische Seite

                                      @@Rolf B

                                      Irgendwas kitzelt meinen Hinterkopf, dass es da irgendwas gab. Irgendeine Methode hatte ein Flag, womit ich ein Pseudoelement kriege und nicht das Element selbst. Aber ich komm nicht mehr drauf.

                                      Dich kitzelt getComputedStyle(element, pseudoElement)? Beispiel

                                      ChatGPT ist gut für solche unspezifischen Fragen. Aber er meint, da gäbe es nichts.

                                      Lieber menschliche Intelligenz als künstliche Dummheit.

                                      Kwakoni Yiquan

                                      --
                                      Ad astra per aspera
                                      1. problematische Seite

                                        @@Gunnar Bittersmann

                                        Beispiel

                                        Das Zitat hab ich mal zum An-die-Wand-Hängen gedruckt (auf 35cm × 50cm). In der Galerie p98a. Mit Holz- (die großen Buchstaben[1]) und Bleilettern[2] (die kleinen).

                                        “‘Nobody wins unless everybody wins.’ —Bruce Springsteen” gedruckt in roter und schwarzer Schrift

                                        Ich musste da kreativ sein, weil nur zwei y im Kasten waren. Stellte sich raus, dass Erik Spiekermann die anderen y dieses Fonts gerade auf einer anderen Druckpresse in Verwendung hatte.

                                        Kwakoni Yiquan

                                        --
                                        Ad astra per aspera

                                        1. gemeint sind nicht Groß- und Kleinbuchstaben, sondern es geht um die Schriftgröße ↩︎

                                        2. Sind die heutzutage noch aus Blei oder nimmt man da anderes Metall? 🤔 ↩︎

                                        1. problematische Seite

                                          Das Zitat hab ich mal zum An-die-Wand-Hängen gedruckt (auf 35cm × 50cm). In der Galerie p98a. Mit Holz- (die großen Buchstaben[^1]) und Bleilettern[^2] (die kleinen).

                                          Hallo Gunnar,

                                          vielen Dank für den Hinweis auf die Galerie p98a!

                                    2. problematische Seite

                                      Na eben! Oder: einerseits klemmt da was beim “counten”. Und andererseits wird so ein ::before zu einem display: none Element eben doch angezeigt! Zumindest der Verdacht, es könnte da einen Zusammenhang geben, liegt doch irgendwie nahe.

                                      1. problematische Seite

                                        Hallo nix,

                                        andererseits wird so ein ::before zu einem display: none Element eben doch angezeigt!

                                        Vielleicht im Safari. Der kann ja auch nicht zählen. In Chrome und Firefox kann ich sowas nicht beobachten.

                                        Minimale Onlinebeispiele helfen da beim Verständnis, wie oft sagen wir das noch? Fiddle, Pen, es gibt eine Menge Tools.

                                        Rolf

                                        --
                                        sumpsi - posui - obstruxi
                                        1. problematische Seite

                                          @@Rolf B

                                          andererseits wird so ein ::before zu einem display: none Element eben doch angezeigt!

                                          Vielleicht im Safari.

                                          Natürlich nicht! Beispiel – weißer Adler auf weißem Grund, auch im Safari.

                                          Entweder nix kommt endlich mal mit Online-Beispielen daher oder wir sollten sein/ihr/deren Geschwafel einfach ignorieren.

                                          Kwakoni Yiquan

                                          --
                                          Ad astra per aspera
                                          1. problematische Seite

                                            Ist doch egal. Schließlich ist’s den „Webkit-Fritzen“ mehr als ausreichend gewesen. Mit dem nächsten Update sollte das sich dann erledigt haben.

                                            1. problematische Seite

                                              Der Mensch denkt … Ander gesagt: eine neue Safari-Version ist raus. Der Bug? Keine Ahnung, denn jetzt funktioniert da noch weniger als zuvor! 🤬

                                              1. problematische Seite

                                                Es schlägt 13! Oder: FireFox mächte auch teilhaben, nicht mehr zählen! Vermuteter Grund: im Inspector taucht das ::after nicht hinter dem li sondern nach dem da eingeschlossenen a auf! (Und das CSS sagt dann korrekt „da zähl’ ich nicht“?) Zwei Browser, zwei zetlich nahe beieinander liegende Updates, zwei Fehler, die zumindest ziemlich verwandt aussehen …

                                                1. problematische Seite

                                                  Hallo nix,

                                                  Dein Ton im Safari Report ist zu ruppig. Damit machst du dir dort keine Freunde.

                                                  Wenn der Fehler auf einmal auch im FF ist, prüfe das Umfeld der vermeintlich kaputten Regel. Es könnte ein Folgefehler sein.

                                                  Rolf

                                                  --
                                                  sumpsi - posui - obstruxi
                                                  1. problematische Seite

                                                    Daß mein aktiver Sprachschatz gerade so ausreicht, um „bei denen“ nicht gleich vor den Theken verhungern zu müssen, läßst sich wohl kaum noch ändern. Da bin ich lieber ruppig als völlig unverstanden.

                                                    Und beim Fehler: es ist ja nicht der gleiche. Er ist „thematisch“ (irgenwie rund um ::before und ::after) mit dem ursprünglichen verwandt. Und unterscheidet sich bei den beiden ja schon gewaltig, sobald man die relevante Stelle im CSS (die im vorherigen FF noch einwandfrei, im vorherigen Safari mangelhaft funktioniert hat) bewirkt zwar ein anscheinend identisches Verhalten („zählt nicht mehr“), aber da Firefox „nur nicht zählt“, Safari jetzt aber schon das CSS zerreißt, denke ich an ein Problem in tieferen (und, -webkit… hin, -moz… her) wahrscheinlich brüderlich geteilten) Schichten der Software.

                                                    1. problematische Seite

                                                      Hallo nix,

                                                      ohne ein Onlinebeispiel deinerseits sind wir auch hier nur bei Spökenkiekerei.

                                                      Rolf

                                                      --
                                                      sumpsi - posui - obstruxi
                                                      1. problematische Seite

                                                        Immerhin könnte hier die Info, daß es irgendwo rund um ::before und ::after aktuell Probleme gibt, von Interesse sein. Nach den Kommentaren, die ich „von den Webkit-Fritzen“ gelesen habe, war (jedenfalls in meinem Fall) anscheinend das erste <li>, das von einem via nesting vorgegebenen Layout betroffen ist.

                                                        Offen ist, ob der jetzt auftretende und (jendenfalls oberflächlich betrachtet) sich gleich auswirkende Fehler die Folge meiner Meldung ist. Oder ob da „mehrerte Köche“ an nahe beieinander stehenden Töpfen einander in die Quere kamen.

  4. problematische Seite

    Hallo nix,

    zum Thema Screenreader: Da ist gerade ein Post zum Thema accessible live regions gekommen. Eigentlich brauchst Du genau das.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Du meinst vmtl. https://forum.selfhtml.org/self/2024/jan/17/lesetipp-accessible-notifications-with-aria-live-regions-sara-soueidan/1812809#m1812809

      Also vorerst reicht es bei mir nur für eine kleines Häckchen in der Seitenleiste. Vorläufig bin ich mit meinen sprachlichen Fähigkeiten beim Tanz zwischen CSS-HTML-Swift gut ausgelastet. Sinn und Zweck „von Aria“ sind mir ja einigermaßen klar. Aber für mehr als ein kleines Aterixinum ist kaum noch Platz: (vorerst:) alea jacta sunt. „Gell, Käsar!“ 🤡