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

Beitrag lesen

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>