CSS-Angaben

[Holger]

Hallo,

ich habe im CSS definiert

.fett {font-size: bold;}

.zentriert {.....}

Im HTML an einigen Stellen

... class="fett zentriert"

Jetzt benötige ich noch einmalig ein Element mit

fett, zentriert und margin: 0.5rem 0

Soll ich da eine weitere Definition in CSS machen oder die style-Angabe im HTML?

[Gunnar Bittersmann]

@@Holger

ich habe im CSS definiert

.fett {font-size: bold;}

.zentriert {.....}

Im HTML an einigen Stellen

... class="fett zentriert"

Das heißt, du verwendest Inline-Styles: du gibst im HTML die Darstellung an. Das sollte man nicht tun.

Und wenn schon Inline-Styles, dann kannst du sie auch gleich per style-Attribut angeben. Oder HTML-Elemente center und b vewenden.

Jetzt benötige ich noch einmalig ein Element mit

fett, zentriert und margin: 0.5rem 0

Soll ich da eine weitere Definition in CSS machen oder die style-Angabe im HTML?

Wenn du sowieso Inline-Styles verwendest, kommt’s auf einen mehr oder weniger auch nicht an.

Besser wäre es allerdings, die Komponenten im HTML nach ihrer Funktion/ihrem Inhalt zu klassifizieren und dann die Komponenten zu stylen.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Oder HTML-Elemente center und b vewenden.

<b> - naja. Immerhin noch aktiv im Standard.
<center> - Das missbillige ich! Die Spec auch.

Rolf

[Gunnar Bittersmann]

@@Rolf B

<b> - naja. Immerhin noch aktiv im Standard.

Und hat genauso viel (besser gesagt: wenig) Semantik wie <span class="fett">. Deshalb hatte ich ja nicht <strong> vorgeschlagen.

<center> - Das missbillige ich! Die Spec auch.

Es ist nicht davon auszugehen, dass Browser aufhören werden, das zu unterstützen und damit Millionen von Webseiten anders rendern. Also warum nicht?

Ich missbillige Inline-Styles; also <center> und <span class="zentriert"> gleichermaßen.

🖖 Live long and prosper

PS: Wobei <center> in der CSSBattle gute Dienste leistet.

[Robert B.]

Moin Gunnar,

Ich missbillige Inline-Styles; also <center> und <span class="zentriert"> gleichermaßen.

<center style="text-align:left">😝</center>

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

wegen

center {
   align-self: center;
}

funktioniert es aber trotzdem. For einen gewissen Wert von $funktioniert jedenfalls 🤣

Rolf

[Gunnar Bittersmann]

@@Robert B.

<center style="text-align:left">😝</center>

Eben deshalb gehört ja

center { text-align: center !important }

in jedes Stylesheet! 🤪

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

hört auf!

Sonst krieg ich (a) einen Riss ins Zwerchfell und (b) Holger glaubt das am Ende noch

Rolf

[Gunnar Bittersmann]

@@Rolf B

und (b) Holger glaubt das am Ende noch

Die Zeichen „😝“ und „🤪“ sollten ihn davon abhalten.

BTW: ähnlich und doch anders: So wie center { text-align: center } steht auch [hidden] { display: none } im UA-Stylesheet. Da macht es aber durchaus Sinn, [hidden] { display: none !important } in sein Autorenstylesheet zu packen, damit das nicht ungewollt durch irgendein .widget { display: grid } o.ä. überschrieben wird.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Rolf B

<center> - Das missbillige ich! Die Spec auch.

Die Spec missbilligt so einiges: auch <nobr>.

Ist das wirklich ein rein präsentationsbezogenes Element? Oder steckt da nicht auch Sinn (d.h. Semantik) dahinter? Es wäre also erhaltenswert gewesen?

Zufällig hatte ich gerade eben den Fall: „E-Mail-Adresse“. Das soll natürlich nicht nach dem ersten Bindestrich getrennt werden (wie in Abb. 1 im Codepen).

hyphenate-limit-chars wirkt wohl nur bei Silbentrennung mit hyphens, nicht bei Trennung an Bindestrichen o.ä. (Abb. 2)

Da wäre <nobr> echt hilfreich (Abb. 3) anstatt dass man das mit Inline-Styles oder Helferklasse nachbauen muss (Abb. 4).

Eine andere Überlegung ware, statt des Bindestrichs U+002D den nicht-umbrechenden Bindestrich U+2011 zu verwenden. (Abb. 5) Aber E‑Mail-Adresse ist nun nicht gerade besonders gut lesbarer Code. Was ‑ ist, wird kaum jemand im Kopf haben. Für jeden Scheiß gibt’s in HTML benannte Entitys^[1], nur für etliche sinnvolle Zeichen nicht.

Der am besten lesbare Code ist <nobr>E-Mail</nobr>-Adresse. Verwenden in der Gewissheit, dass Browser das auch in Zukunft unterstützen werden?

🖖 Live long and prosper

---

1. Gruß an Den Martin 😉 ↩︎

[Der Martin]

n'Abend,

Zufällig hatte ich gerade eben den Fall: „E-Mail-Adresse“. Das soll natürlich nicht nach dem ersten Bindestrich getrennt werden (wie in Abb. 1 im Codepen).

obwohl das nur ein kosmetischer Aspekt wäre. Noch lästiger ist, wenn die Mailadresse selbst U+002D enthält (was oft der Fall ist), und da getrennt wird.

Eine andere Überlegung ware, statt des Bindestrichs U+002D den nicht-umbrechenden Bindestrich U+2011 zu verwenden.

Aber dann verhinderst du sehr wirksam copy&paste, weil du damit die Mailadresse an sich veränderst. Wohlgemerkt: Ich spreche von U+002D in der Mailadresse selbst, an denen bitte auch kein Umbruch erfolgen soll.

Einen schönen Tag noch
 Martin

[MudGuard]

Hi,

<center> - Das missbillige ich! Die Spec auch.

Die Spec missbilligt so einiges: auch <nobr>.

nö, sie erwähnt es gar nicht.

Siehe auch https://forum.selfhtml.org/self/2025/sep/03/input-in-bild-einfugen/1821607#m1821607

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Die Spec missbilligt so einiges: auch <nobr>.

nö, sie erwähnt es gar nicht.

Siehe auch https://forum.selfhtml.org/self/2025/sep/03/input-in-bild-einfugen/1821607#m1821607

Was man innerhalb von 5 Wochen so alles vergisst!

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

jetzt weißt Du, wie es mir mit deinen Beiträgen regelmäßig geht 😝

Rolf

[Rolf B]

Hallo Holger,

Jetzt benötige ich noch einmalig ein Element mit
fett, zentriert und margin: 0.5rem 0

Warum benötigst Du an einsamer Stelle oben und unten den Rand? Vielleicht bist Du mit anderen Layoutmodellen (insbes. grid) besser bedient. Da kannst Du mit der gap-Eigenschaft automatisch Abstand zwischen den Elementen festlegen.

Magst Du uns deine Seite einmal zeigen (d.h. einen Link darauf geben)? Dann gibt's zwar vermutlich eine ganze Liste von Verbesserungsvorschlägen, aber dann kann ja eigentlich nur nützen.

Rolf

[Robert B.]

Moin Holger,

ich habe im CSS definiert

.fett {font-size: bold;}

.zentriert {.....}

„use class with semantics in mind“ galt 2004 und gilt zwei Dekaden später immer noch 😉

Viele Grüße
Robert