Frage zum Wiki-Artikel „Kaskade“

[nix]

Reihenfolge von Deklarationen: geradde entdeckt, daß z.B.

		header h1 {
			font-size: 1.25rem;
			padding: 10%
			text-align: center;
			width: max-content;
		}

bzgl. der Begrenzung sich merkbar von

		header h1 {
			font-size: 1.25rem;
			text-align: center;
			width: max-content;
			padding: 10%
		}

unterscheidet! “Reihenfolge matters — sometimes”!

Und wer das nicht weiß, nicht mal ahnt, sucht den Fehler bis ans Ende aller Tage!

[Gunnar Bittersmann]

@@nix

Reihenfolge von Deklarationen: geradde entdeckt, daß z.B.

  	header h1 {
  		font-size: 1.25rem;
  		padding: 10%
  		text-align: center;
  		width: max-content;
  	}

bzgl. der Begrenzung sich merkbar von

  	header h1 {
  		font-size: 1.25rem;
  		text-align: center;
  		width: max-content;
  		padding: 10%
  	}

unterscheidet! “Reihenfolge matters — sometimes”!

Sometimes, ja. Hier, nein.

Und wer das nicht weiß, nicht mal ahnt, sucht den Fehler bis ans Ende aller Tage!

Der Fehler ist das fehlende Semikolon nach padding: 10% im ersten Beispiel.

🖖 Живіть довго і процвітайте

[nix]

Fehlendes …? Ei verflixt! Und (auch) diese Stelle ist längst umgeschrieben. Kann also nicht mehr nachsehen, ob das Semikolon nur hier fehlte oder nicht. Bleibt nur ein verzweifelter Ruf nach einem CSS-Compiler? #warnings muß, nein, darf der nicht kennen …

[Matthias Scharwies]

Servus!

Fehlendes …? Ei verflixt!

Das Phänomen (Vergessene Strichpunkte ( ; ) wird im 2. Kapitel des CSS-Einstiegs beschrieben.

Und (auch) diese Stelle ist längst umgeschrieben. Kann also nicht mehr nachsehen, ob das Semikolon nur hier fehlte oder nicht.

Du kannst bei jedem Wiki-Artikel über die Versionsgeschichte einsehen, was wann und von wem geändert wurde.

@Rolf B hatte am 05.06. den Artikel aufgrund deiner Frage zum Wiki-Artikel „Kaskade“ gelesen und dann nur ein Formatierungs-<br> entfernt:

CSS/Tutorials/Einstieg/Kaskade: Unterschied zwischen den Versionen

Aktuelle Version vom 5. Juni 2023, 14:58 Uhr

---

Und das macht es uns so schwer:

Du stellst keine Frage zum Artikel, in dem du entweder …

• dein Problem, das du hast, oder ein Phänomen, das die aufgefallen ist, beschreibst
• die genaue Textstelle kennzeichnest (Oft finden wir beim erneuten Durchlesen des Artikels etwas, das wir besser formulieren können / das mittlerweile veraltet ist. Da würdest du uns mit der Nennung der konkreten Textstelle und einem eigenen Formulierungsvorschlag helfen.)

Stattdessen kommt eine Behauptung oder ein nicht funktionierendes Minimalbeispiel, das wir erst analysieren müssen.

Bitte halte Dich an die Verhaltensrichtlinien für alle Teilnehmer

Bleibt nur ein verzweifelter Ruf nach einem CSS-Compiler? #warnings muß, nein, darf der nicht kennen …

Evtl. sowas? https://jigsaw.w3.org/css-validator/

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo nix,

Ich glaube, Matthias verstand dich miss.

Mir selbst ist es ja bei privaten Sachen auch oft zu lästig, aber bei solchen Sachen zeigt sich, dass der Einsatz von git o.Ä. sehr nützlich ist. Dann könntest du in deine Historie schauen.

Rolf

[Gunnar Bittersmann]

@@nix

Bleibt nur ein verzweifelter Ruf nach einem CSS-Compiler? #warnings muß, nein, darf der nicht kennen …

Meinst du vielleicht einen Validator?

🖖 Живіть довго і процвітайте

[nix]

Oha, da hat sich anscheinend was getan, seit ich da irgendwann mal vorbeigekommen bin. Mal sehen … Oh:

…
Unbekannte Dimension 40cqb 
…
Die Eigenschaft container-type existiert nicht : size
…
Die Eigenschaft scale existiert nicht : 1
…
Ungültige Nummer : border-color var(--color) ist keine gültige Farbe mit 3 oder 6 Hexadezimalzahlen ) 
…

Also doch nicht so viel, wie erhofft. Und weil die Browser sowieso auch noch mitzanken: in deren Inspektoren wäre so ein „Compiler“ doch gut aufgehoben. Man sähe da dann auch gleich, woran sich genau dieser Browser gerade stört.

---

Zum Mecker über border-color:

span {
  …
 	--version1color: 250 100 180;
  …
}
…
span[version] {
 	color: rgb(var(--version1color));
}

[Matthias Scharwies]

Servus!

Oha, da hat sich anscheinend was getan, seit ich da irgendwann mal vorbeigekommen bin.

Am Artikel? - Nein!

Am Thread hier im Forum? - Ja, da hast Du den Faden nach 6 Wochen wieder aufgenommen. (Ich finde mich in deinen vielen Threads nicht zurecht und glaube, dass das ein Teil deines Problems ist.)

Mal sehen … Oh:

…
Unbekannte Dimension 40cqb 
…
Die Eigenschaft container-type existiert nicht : size
…
Die Eigenschaft scale existiert nicht : 1
…
Ungültige Nummer : border-color var(--color) ist keine gültige Farbe mit 3 oder 6 Hexadezimalzahlen ) 
…

Also doch nicht so viel, wie erhofft. Und weil die Browser sowieso auch noch mitzanken: in deren Inspektoren wäre so ein „Compiler“ doch gut aufgehoben. Man sähe da dann auch gleich, woran sich genau dieser Browser gerade stört.

Immer an der Stelle vor dem Fehler!

• CSS/Tutorials/Einstieg Typische_Fehlerquellen

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo nix,

Unbekannte Dimension 40cqb

Ich frug, glaube ich, schon einmal: Welche Browserversion ist das? Weil...
Oder habe ich deine Antwort nur übersehen?

color: rgb(var(--version1color));

Da hatte ich zuerst gedacht, dass drei Argumente einer CSS Funktion nicht aus einem custom property geholt werden dürfen.

Aber nein, das geht. Man kann sogar nur 2 von 3 Argumenten aus dem custom property beisteuern – solange es ein String ist. Ich habe das in einem Fiddle ausprobiert und es funktioniert mit Chrome und Firefox. Safari kann ich nicht testen.

body {
  --barbie: 220 50 255;
  --ken: 240 230;
}
p:nth-of-type(1) { color: rgb(var(--barbie)); }
p:nth-of-type(2) { color: rgb(var(--ken) 20); }

<p>Hallo</p>
<p>Welt</p>

Das Hallo wird barbiepink und die Welt wird kenblond.

Achso: "solange es ein String ist" – das heißt, dass man nicht per @property Regel etwas anderes deklarieren darf. Uh oh, eine Baustelle. @property ist im Wiki sehr mau dokumentiert und war von den Custom Properties aus unverlinkt.

Rolf

[nix]

Also die cqb stammen, nicht zuletzt, von wem wohl? Und wenn man versuchen will, zu verstehen, woher sie stammen (nicht: was sie bewirken … sollten!), muß man sie wohl irgendwo mit reinschreiben.

Und das mit den properties als String: ja, es sieht ganz so aus, als ob die kaum anders arbeiten, als Makros für Assembler oder in C. Immerhin antworten ja auch die Inspektoren der Browser auch nur mit einem solchen String, wenn man da die Werte abfragen möchte. (Und schon wieder weiß man dann nicht wirklich mehr.)

[Rolf B]

Hallo nix,

im Wiki stammen sie von Gunnar.

In der Spec stammen sie von Google, würde ich sagen, da steht Tab Atkins drauf.

Im Safari funktionieren sie seit Version 16.4, der ist 4 Monate draußen. Deshalb bohre ich ja so nach der Browserversion.

Rolf

[nix]

Es wäre ja schön, daß ich einen da funktinierenden Browser verwende (der immer noch nicht runden kann …). Aber auch das, was der mir da bislang abgeliefert hat, macht mich nicht klüger. Wobei ettlich meiner Experimente wohl (auch) daran gescheitert sind, daß ich, na, sagen wir mal, {min,max}-{width,height} für fast schon allmächtig gehalte hatte. Und Flex und Grid das anscheinend nicht glauben. Das, mein, Problem: entweder erhalte ich mit, sagen wir mal, 100cqi einen Inhalt, der einen Scrollbalken erzwingt. 100cqi > 100vi? Und dann wieder, aus noch unbekannter Ursache und eher stelten, ist es merkbar weniger. Wobei ich aber auch da nicht weiß, woher die Größe dann stammt. Bislang wurde da jede vage Idee meist nach kurzer Zeit hinterrückgs gemeuchelt.

Da würde, denke ich, mache arme Seele etwas Hilfe benötigen. Darstellungen, die zeigen, „wer“ (welches Element) da „wie“ (container-type? contain?) wem (einem Nachfahren? oder einem Vorfahren? Oder sogar Geschwistern?) welche Werte in welchem Maß (zwingend? Unter- / Ober-Grenze?) antut.

Das eine oder andere einfache Grid war ja kaum ein Problem. Aber seit ich versuche, da „so richtig“ meine Vorstellungen reinzupacken und deshalb im body-grid ein paar Grid-Kinder einzupassen, welche wiederum … hmmm, vielleicht auch mal ein Flex? … erhalte ich gelegentlich immer wieder mal ein „noch zwei Handgriffe, dann paßt es“ Teilergebnis. Und nachdem aus den zwei Handgriffen Dutzende geworden sind und mir immer mehr von dem um die Ohren fliegt, was gerade noch doch so gut augesehen hat …

---

Wenn ich mir noch den Hinweis erlauben darf, daß meiner Meinung nach, die (mehr oder weniger) originale Dokumentation, „:lang(en-Latn-SUPERTECHNICAL)“, für viele wahrscheinlich besser geeignet ist, deren Sprachkenntnisse zu verfeinern, als „bezahlbare HTML-Ergebnisse“ zu produzieren? Deshalb ja dieses Wiki? Na ja … ’tschuldigung, ich weiß, daß das, stellenweise auch sehr, übertrieben ist. Aber wort-wörtlich Übersetztes, in dem dann auch noch … Anglizismen? Paßt das für solche Fachbegriffe auch? … übernommen werden, hilft nicht so sehr, wenn man schon Schwierigkeiten hat, Zusammenhänge überhaupt zu entdecken.

[Rolf B]

Hallo nix,

wenn 100cqi oder auch 100vw Scrollbalken erzeugen, dann schießt da ggf. ein Padding, eine Border oder ein Margin quer.

box-sizing:border-box aktiviert den "Internet-Explorer 5.5" Modus für Boxgrößen, d.h. eine 100cqi Box ist auch mit Padding und Border 100cqi breit. Der Default für box-sizing ist content-box, d.h. wenn Du 0.1em Inline-Padding und eine "thin" Border hast, führt 100cqi zu einer 100cqi+0.2em+? breiten Box (? für "thin" Border).

Das Leben als Box im Browser ist nicht leicht…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Der Default für box-sizing ist content-box

Was auch mit auf der Liste der Sprachfehler von CSS steht.

🖖 Живіть довго і процвітайте

[nix]

Oh, da steht bei mir oft gleich am Anfang des CSS ein „* { box-sizing: border-box; } mit drin. Die Ecke habe ich schon vor einiger Zeit gefunden. Und: wenn das zuschlägt, dann deuten die Balken meist schon auf etwas mehr als die Breite/Höhe derselben hin.

Vielleicht der Grund, warum ich mich dann über die Spielchen von min- und max-Dimensionen so schön geärgert habe.