nix: HTML + CSS debuggen

Beitrag lesen

problematische Seite

Nein, nicht FF. Safari ist dran. Ein eher kleines „Schmierzettel-Projekt“, in dem ich mit counter() und Co ein paar Orientierungsmarken gesetzt hatte. Die gekürzte Struktur:

<head>
 	<style>
/* Counter */
	 	body { counter-reset: Staffel Episode Total; }
		 article /* Staffeln */ {
 	  		counter-reset: Episode;
	 	  	counter-increment: Staffel;
		  }
 		section /* Episoden */ { counter-increment: Episode Total; }
	 	section::before {
  			grid-area: Meta;
	  		content: "Staffel " counter(Staffel) " Episode "counter(Episode) " (Total: " counter(Total) ")";
 		}
…
	 	article {
		 	display: grid;
			 grid: "Überschrift" min-content "Aufzählung" 1fr / 1fr;
 		}

	 	section {
		 	container-type: inline-size;
			 display: grid;
 			grid: "Meta Titel" min-content "Meta Beschreibung" min-content "Meta Metadata" min-content /	20ch 1fr;
	 	}
		 section > header {
			 grid-area: Titel;
…
 		}
	 	section > main { grid-area: Beschreibung;	}
		 section > footer { grid-area: Metadata; }
 	</style>
</head>
<body>
  <header>…</header>
  <article>
   <header>…</header>
   <section>
    <header>…</header>
    <main> … </main>
    <footer> … </footer>
   </section>
  </article>
</body>

Der Knackpunkt: container-type: inline-size;. Mit der Zeile drin zählt da Safari nur noch von 0-0-0 nach 0-0-0. Abgesehen von extra eingefügten Zeilen zwischendrin (zwischen den „Artikeln“), die belegen, daß da z. B. Total sehr wohl vorhanden ist und hochgezählt wird.

Löscht man den container-type, funktioniert das Zählen wie erwartet.

Und: da verhält sich Firefox „brav“. Also falls der nicht noch irgend welche andere, noch nicht enteckte, Spezialiäten bzgl. container-type bereit hält.