HTML- und CSS-Sheets strukturieren

[Merlin S]

Hallo!

Ich bin noch Anfänger und wollte fragen, ob ihr Tipps habt, wie ich meine Sheets am Besten strukturiere. Auch wollte ich fragen, ob ich Tabulator und Space problemlos zwischen Tags oder Elementen zum Einrücken etc. verwenden kann. Ich freue mich auf die Antworten. Vielen Dank!

Liebe Grüße

Merlin

aus Wien

P.S.: Also ich meine nicht die Struktur der Website selbst, dazu habe ich genug im Wiki gefunden.

[Matthias Scharwies]

Servus!

Hallo!

Ich bin noch Anfänger und wollte fragen, ob ihr Tipps habt, wie ich meine Sheets am Besten strukturiere.

Das ist ein bisschen versteckt und wsl. Grundlage für hitzige Diskussionen:

CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil

Kurz:

1. Am Besten nur noch 1 Stylesheet.

Was früher im Print-CSS stand, passt in eine media query:

@media screen and (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body { color: white; background: black; }
  h1, h2 { color: yellow;}

  a {color: skyblue;}
}
@media print {
  h1, ... {
    color: black;
    background-color: white;
  }
}

CSS/Tutorials/Einstieg/Syntax#Organisation

1. und 6. widersprechen sich.

Ich lege immer alle Farben im :root{} als custom properties an.

Auch wollte ich fragen, ob ich Tabulator und Space problemlos zwischen Tags oder Elementen zum Einrücken etc. verwenden kann.

Das sind wie line breaks ja alles "Leerzeichen" - ess soll übersichtlich aussehen.

Später könnte man so etwas minifizieren und alle Leerzeichen entfernen und das komplette CSS in eine Zeile schreiben.

P.S.: Also ich meine nicht die Struktur der Website selbst, dazu habe ich genug im Wiki gefunden.

Danke!

Herzliche Grüße

Matthias Scharwies

[ottogal]

Hallo Matthias,

CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil

Die Erläuterung zu margin: 0 2em; darin ist wohl nicht ganz treffend:

die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.

Viele Grüße
ottogal

[Matthias Scharwies]

Servus!

Hallo Matthias,

CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil

Die Erläuterung zu margin: 0 2em; darin ist wohl nicht ganz treffend:

die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.

Wie würdest du es formulieren?

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.

Wie würdest du es formulieren?

so, daß auch margin-top und margin-bottom mit zusammengefaßt werden.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Matthias Scharwies

die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.

Wie würdest du es formulieren?

margin-left und margin-right werden zu margin-inline zusammengefasst (bei horizontaler Schreibrichtung).

Auf die Plätze, fertig, los!

Kwakoni Yiquan

[ottogal]

Wie würdest du es formulieren?

Für Einsteiger würde ich die Verkürzung in zwei Schritten vorstellen:
Zuerst margin: 0 2em 0 2em; als Zusammenfassung der 4 einzelnen Werte für top, right, bottom und left,
und dann die weitere Kondensation zu margin: 0 2em;, falls top=bottom und right=left ist.
(Gerade die Kurzformen sind für Anfänger nicht so leicht durchschaubar.
In dem Beispiel würde ich eher nur den ersten Schritt machen, d.h. 4 verschiedene Werte nehmen, und für den zweiten Schritt auf die Wiki-Seite zu margin verlinken.)

Viele Grüße
ottogal

[Matthias Scharwies]

Servus!

Wie würdest du es formulieren?

Für Einsteiger würde ich die Verkürzung in zwei Schritten vorstellen:
Zuerst margin: 0 2em 0 2em; als Zusammenfassung der 4 einzelnen Werte für top, right, bottom und left,
und dann die weitere Kondensation zu margin: 0 2em;, falls top=bottom und right=left ist.
(Gerade die Kurzformen sind für Anfänger nicht so leicht durchschaubar.
In dem Beispiel würde ich eher nur den ersten Schritt machen, d.h. 4 verschiedene Werte nehmen, und für den zweiten Schritt auf die Wiki-Seite zu margin verlinken.)

Ok, danke. Ich schau mal, wie das so kurz wie möglich geht.

Thema ist ja nicht CSS an sich, das sollte in den vorhergehenden Kapiteln eingeführt worden sien, sondern eben

wie man es übersichtlich schreibt und gliedert.

Mein Problem:

1. Farbpalette
2. Schrift
3. Positionierung
4. Display
5. Box-Modell
6. Farben, Hintergründe und weiteres Styling

Wie sollte man 1. und 6. denn organisieren?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Thema ist ja nicht CSS an sich, das sollte in den vorhergehenden Kapiteln eingeführt worden sien, sondern eben

wie man es übersichtlich schreibt und gliedert.

Mein Problem:

1. Farbpalette
2. Schrift
3. Positionierung
4. Display
5. Box-Modell
6. Farben, Hintergründe und weiteres Styling

Wie sollte man 1. und 6. denn organisieren?

Und Positionierung, Display und Box-Modell sollte auch irgendwie anders formuliert / gegliedert werden.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Merlin,

grundsätzlich sind Leerzeichen, Tabs und Zeilenumbrüche "Weißraum" und werden vom vom CSS-Parser wie eine einzelne Leerstelle behandelt. Es gibt ein paar Ausnahmen, z.B. der String der content-Eigenschaft.

In HTML bleiben Weißraumzeichen zunächst erhalten und erzeugen einen Textknoten im DOM. Dieser Textknoten kann auf unterschiedliche Weise zur Anzeige kommen.

• Wenn das Elternelement Flow-Layout verwendet (display:inline oder display:block), wird er angezeigt
  • Wenn im Elternelement white-space:pre oder ähnliches gesetzt ist, wird er vollständig angezeigt
  • Andernfalls kollabiert er zu einer Leerstelle
• Wenn das Elternelement andere Layoutformen verwendet (Flexbox, Grid, Table), werden Weißraum-Textknoten nicht angezeigt.

Sowas kann durchaus merkwürdige Folgen haben. Ich habe vor ewigen Zeiten mal eine Webseite gemacht, da wurden Dokumente in einer Tabelle angezeigt und rechts in der Tabelle waren ein paar Buttons (Bearbeiten, Löschen, etc). Ja, ich weiß, heute würde man es anders lösen. Aber das war 2004 oder so.

Mein HTML sah irgendwie so aus:

<td>
  <input type="image" src="edit.jpg">
  <input type="image" src="delete.jpg">
</td>

Nur so als Prinzip. Die Buttons waren 24px breit, und Milchmädchen Rolf errechnte die Breite der Button-Spalte demzufolge als 48px. Und das ging schief. Die Buttons wurden untereinander angezeigt. Nach einiger Zeit (Entwickler-Tools gab's im IE4 nicht oder ich kannte die nicht, ich war noch jung und doof) kam ich drauf: weil zwischen den beiden Buttons Weißraum war, der als ein Space angezeigt wurde, brauchte ich mehr Platz. Ich hab's dann so gemacht, und es funktionierte:

<td>
   <input type="image" src="edit.jpg"><!--
--><input type="image" src="delete.jpg">
</td>

HEUTE lache ich drüber, man macht einfach keine Layouts mit dem Pixelschuhanzieher und wenn ich's UNBEDINGT wollte, würde ich die Tabellenzelle mit display:flex zur Flexbox machen. Aber 2004 gab's das nicht.

Naja. Was ich sagen wollte: Überschüssiger Weißraum im HTML kann fast immer ignoriert werden. Bis man an den Punkt kommt, wo er doch mal stört…

Rolf

[Matthias Scharwies]

Servus!

Mein HTML sah irgendwie so aus:

<td>
  <input type="image" src="edit.jpg">
  <input type="image" src="delete.jpg">
</td>

Nur so als Prinzip. Die Buttons waren 24px breit, und Milchmädchen Rolf errechnte die Breite der Button-Spalte demzufolge als 48px. Und das ging schief. Die Buttons wurden untereinander angezeigt. Nach einiger Zeit (Entwickler-Tools gab's im IE4 nicht oder ich kannte die nicht, ich war noch jung und doof) kam ich drauf: weil zwischen den beiden Buttons Weißraum war,

Das war früher auch so, wenn man JavaScript/DOM/Node/childNodes ermitteln wollte - Weißraum, auch Zeilenumbrüche und Einrückungen waren ein eigener Knoten.

→ JavaScript/DOM#Whitespace

Heute gibt's JavaScript/DOM/Node/nextSibling

Naja. Was ich sagen wollte: Überschüssiger Weißraum im HTML kann fast immer ignoriert werden. Bis man an den Punkt kommt, wo er doch mal stört…

Das merkt man dann aber erst mal gar nicht! 😀

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Das war früher auch so, wenn man JavaScript/DOM/Node/childNodes ermitteln wollte - Weißraum, auch Zeilenumbrüche und Einrückungen waren ein eigener Knoten.

Das ist heute immer noch so.

<ul>
	<li>Palstek</li>
	<li>Schotstek</li>
</ul>

const listElement = document.querySelector('ul');

console.log(listElement.childNodes.length); // 5

Heute gibt's JavaScript/DOM/Node/nextSibling

?? Und was willst du damit sagen?

Mit nextSibling kommt man zum nächsten Knoten – das kann ein Elementknoten sein oder ein Textknoten oder …

const firstListItemElement = document.querySelector('li');

console.log(firstListItemElement.nextSibling); // [object Text]

Was du vielleicht sagen wolltest: Es gibt children.

console.log(listElement.children.length); // 2

Und mit nextElementSibling kommt man zum nächsten Elementknoten.

console.log(firstListItemElement.nextElementSibling); // <li>Schotstek</li>

☞ Codepen: Knoten

Kwakoni Yiquan