SELF-Wiki: Container Queries-Tutorial - halbwegs fertig

[nix]

Paßt zwar nur „bedingt“ dazu. Aber ich habe etwas entdeckt, das vmtl. für manches meiner Probleme in der Ecke zumindest mit verantwortlich ist. Es ist zwar recht vage, ich suche nach einer Idee, mit der ich alles „zusammenkleben“ kann — aber es ist, wenigstens für mich, mit einem eindeutigen „Aha-Effekt“ verbunden.

Also: ich hatte versucht, meine Vorstellungen mit „minimalistischem Element-Verbrauch“ umzusetzen. So wenige Klassen zu verbauen, wie möglich, die Separation der Inhalte (weitgehend) alleine mit <header>, <article>, … und nicht zuletzt mit benutzerdefinierten Elementen (ohne JS dahinter) wie z.B. <info-card> anstelle von (oft tief verschachtelten) div-Wüsten.

Das hat, abgesehen von den ja schon „erwähnten“ Eigentümlichkeiten der CSS-Mathematik mit Firefox und Safari bis auf kleinere Unterschiede und „auf den ersten Blick“ funktioniert. Aber dann kamen diese „Details“ (≠ details). Beim Versuch, da z.B. diese „cqb“ (aber auch „anderen modernen Kram“) einzusetzen, ist mir dann immer wieder alles um die Ohren geflogen. Ein paarmal schon so, daß ich das Stylesheet komplett neu angefangen habe.

Und gestern habe ich dann im Inspektor von Safari etwas gesehen, das seltsam aussah: unter „Layer“ tauchte nicht unbedingt das auf, was ich erwartet hatte. Ein paar, aber nicht alle, dieser „neumodischen Strukturierungs-Tags“ schienen sich unsichtbar gemacht zu haben, stattdessen gab es da deren Inhalt, meist ein paar <p> zu sehen. Nach ein paar Überlegungen habe ich jetzt einfach mal eine Kopie des Projekts angefertigt und da drin dem Texteditor überlassen, aus z. B. <article> … </article> ein <div class="article"> … </div> (usw. usf.) zu machen. Und im CSS dazu dann natürlich auch div.article anstelle von article. Das überraschende (vorläufige) Ergebnis: diese neue Version ist gleich „explodiert“, sieht erheblich anders aus. Was hier der schnell erkannte, aber doch auch unverstandene, Grund ist:

body {
…
	grid:
		"b-head b-head b-head" minmax(10cqb, 1fr)
		"b-text b-pics b-infos" minmax(78cqb, 12fr)
		"b-text b-comment b-infos" minmax(10cqb, 1fr)
	/	var(--div.article-width) minmax(100ch, 1fr) var(--info-width);
…
}

funktioniert in der „Sparversion“. Sprich: Safari mecktert daran nichts an. Und in der „ausführlichen“ meint er plötzlich, da stecken ungültige EIgenschaftswerte drin!

Ja, ich bin verwirrt. Denn: wenn cqb da nicht erlaubt ist: wieso dann „jetzt“. Und: woher kam „des Browsers Segen“ denn davor? Immerhin haben die da ja bewirkt, was ich ihnen angedacht hatte … 🤯