CSS oder nicht

[Gudrun]

Hallo,
wenn ich nur an einer Stelle einem div die Angabe margin-left... benötige, lohnt sich dann der Aufwand, dies in CSS zu definieren? Schönen Gruß

[MrMurphy]

Ja, das lohnt sich.

[Rolf B]

Hallo Gudrun,

du wirst sicherlich noch andere style Angaben haben, und es ist definitiv besser, das Styling an einem Ort beisammen zu haben.

Dein 12 Monate älteres Ich wird es dir danken 😉

Rolf

[Gudrun]

Danke,
noch eine Frage.
Manchmal sehe ich im CSS eine width-Angabe, manchmal eine max-width-Angabe und manchmal sogar beide. Was ist für das responsive design korrekt?

[Ryuno-Ki]

Moin Gudrun,

Danke,
noch eine Frage.
Manchmal sehe ich im CSS eine width-Angabe, manchmal eine max-width-Angabe und manchmal sogar beide. Was ist für das responsive design korrekt?

Kommt drauf an (wirklich!)

Beachte, die Berechnung:

max-width overrides width, but min-width overrides max-width.

Das heißt, wenn width > max-width, gewinnt max-width. Aber: wenn min-width > max-width gewinnt min-width.

Prinzipiell tendiere ich zu min-width und max-width, um eher Grenzen festzusetzen, in denen der Web-Browser Elemente layouten darf.

Bei ersetzten Elementen wie Bildern kann aber eine width sinnvoll sein, um Reflow zu vermeiden. Hier ist aber auch wieder das width-Attribut besser geeignet. Persönlich würde ich da auch das CSS für responsive Bilder drauf setzen. Für iFrames gibt es dann noch einmal andere Tricks (Artikel von 2019. Gibt sogar bessere Techniken, aber ich habe genug geredet).

(Zu Repaint und Reflow haben wir noch keine Artikel im SELF wiki).

Gruß,

[Gunnar Bittersmann]

@@Ryuno-Ki

Prinzipiell tendiere ich zu min-width und max-width, um eher Grenzen festzusetzen, in denen der Web-Browser Elemente layouten darf.

Dafür kann man auch die Funktionen min(), max() und clamp() verwenden.

Was in einigen Fällen (looking at you, flexbox) aber nicht dasselbe tut. In diesen Beispiel hab ich

audio, video {
	width: 16em;
	max-width: 100%;
}

weil

audio, video {
	width: min(16em, 100%);
}

nicht geht (für Viewpotbreiten zwischen 513px und 565px bei Standard-Browsereinstellungen).

🖖 Live long and prosper