Antwort an „nix“ verfassen

Frage zum Wiki-Artikel „counter()“

nix 29.01.2024 13:10

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 …