HTML + CSS debuggen

[Matthias Scharwies]

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.

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:

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