Guten Morgen! > 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. Genau richtig! > > 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. Gut! > 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. Dann nimm doch em und probier erst mal damit. > Ein paarmal schon so, daß ich das Stylesheet komplett neu angefangen habe. Richtig! Entweder sauber neu anfangen oder verdächtige Sachen auskommentieren. Wenn's klappt, wieder weitermachen. > > 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. Wir brauchen da ein Live-Beispiel, welches du auch anonym auf bplaced oder codepen stellen kannst. So ist das alles ein Ratespiel. Was sagt denn der Seiteninspektor in Firefox dazu? > 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. Aber vorher hattest du doch gesagt, dass das HTML-Gerüst funktioniert hätte? Die "neuen" Elemente wie article können nicht Schuld sein! > Und im CSS dazu dann natürlich auch `div.article` anstelle von `article`. ~~~ CSS div.article { color: red; } ~~~ geht, **aber ...** > 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! Funktioniert `--div.article-width`? Ich teste das in einem Minimal-Beispiel: ~~~ CSS h1 { --red.color: red; color: var(--red.color); } ~~~ Das geht bei mir (Win11, FF115) nicht. Ich hätte so etwas nie verwendet, da ich immer mit Unter- oder Bindestrich trenne. > > 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 … 🤯 Ganz persönlich: `cqb` und die vielen `minmax()` ist mir zuviel Finetuning - ich würde immer nur eine Spalte / Zeile mit `minmax()` setzen und bei den anderen nur mit `fr` arbeiten. Dito `em` anstelle von cqb und dann mal schauen. In einem zweiten Schritt dann evtl. andere Einheiten, aber warum `cq*` ohne container??? Aber genaues kann man nur bei einem Live-Beispiel sagen, wenn wir die Fehler selbst sehen! Herzliche Grüße Matthias Scharwies -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

Guten Morgen! > 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. Genau richtig! > > 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. Gut! > 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. Dann nimm doch em und probier erst mal damit. > Ein paarmal schon so, daß ich das Stylesheet komplett neu angefangen habe. Richtig! Entweder sauber neu anfangen oder verdächtige Sachen auskommentieren. Wenn's klappt, wieder weitermachen. > > 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. Wir brauchen da ein Live-Beispiel, welches du auch anonym auf bplaced oder codepen stellen kannst. So ist das alles ein Ratespiel. > 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. Aber vorher hattest du doch gesagt, dass das HTML-Gerüst funktioniert hätte? > Und im CSS dazu dann natürlich auch `div.article` anstelle von `article`. ~~~ CSS div.article { color: red; } ~~~ geht, **aber ...** > 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! Funktioniert `--div.article-width`? ~~~ CSS h1 { --red.color: red; color: var(--red.color); } ~~~ Das geht bei mir (Win11, FF115) nicht. Ich hätte so etwas nie verwendet, da ich immer mit Unter- oder Bindestrich trenne. > > 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 … 🤯 Ganz persönlich: `cqb` und die vielen `minmax()` ist mir zuviel Finetuning - ich würde immer nur eine Spalte / Zeile mit `minmax()` setzen und bei den anderen nur mit `fr` arbeiten. Dito `em` anstelle von cqb und dann mal schauen. In einem zweiten Schritt dann evtl. andere Einheiten, aber warum `cq*` ohne container??? Aber genaues kann man nur bei einem Live-Beispiel sagen, wenn wir die Fehler selbst sehen! Herzliche Grüße Matthias Scharwies -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!