3 moderne CSS-Eigenschaften, die auf keiner Website fehlen sollten

xguru · 2023-12-26T10:03:01+09:00

color-scheme Es gibt das Problem, dass die Scrollbar hellweiß leuchtet, obwohl die Website den Dark Mode unterstützt. Wenn die Eigenschaft color-scheme auf dark light gesetzt wird, signalisiert das dem Browser, dass die Seite sowohl den Dark Mode als auch den Light Mode verarbeiten kann, und auch die Scrollbar wird dunkel. Mit einem Meta-Tag kann color-scheme auf das Dokument angewendet werden, sodass der Browser die Nutzerpräferenz bereits kennt, bevor das CSS geladen wird. In Kombination mit der Media-Feature prefers-color-scheme lässt sich perfekt steuern, welche Bereiche je nach Nutzerpräferenz geändert werden sollen. Mit dem Selektor :has() kann die Eigenschaft color-scheme auf das Root-Element angewendet werden, wenn body die Klasse dark hat. text-wrap Bei Überschriften oder Bildunterschriften kommt es manchmal zu unschönen Zeilenumbrüchen, sodass in der letzten Zeile nur ein einziges Wort steht. Mit dem Wert balance für die Eigenschaft text-wrap lassen sich Überschriften auf einer Website ausgewogener umbrechen. Diese Funktion ist browserunabhängig, funktioniert in modernen Umgebungen gut und baut auf älteren Umgebungen graceful ab. Scroll-margin Bei Anchor-Links auf einer Webseite kann es passieren, dass das Zielelement wegen eines fixierten Headers verdeckt wird. Mit der CSS-Eigenschaft scroll-margin lässt sich dieses Problem lösen, indem scroll-margin-top auf die Höhe des fixierten Headers gesetzt wird. Mit dem Selektor :is kann dieselbe Behandlung auf mehrere Elemente wie h2, h3 und h4 angewendet werden; mit Einheiten wie ex oder lh lässt sich ein dynamischer Abstand festlegen.

(bejamas.io)

43 Punkte von xguru 2023-12-26 | 4 Kommentare | Auf WhatsApp teilen

color-scheme

Es gibt das Problem, dass die Scrollbar hellweiß leuchtet, obwohl die Website den Dark Mode unterstützt.
Wenn die Eigenschaft color-scheme auf dark light gesetzt wird, signalisiert das dem Browser, dass die Seite sowohl den Dark Mode als auch den Light Mode verarbeiten kann, und auch die Scrollbar wird dunkel.
Mit einem Meta-Tag kann color-scheme auf das Dokument angewendet werden, sodass der Browser die Nutzerpräferenz bereits kennt, bevor das CSS geladen wird.
In Kombination mit der Media-Feature prefers-color-scheme lässt sich perfekt steuern, welche Bereiche je nach Nutzerpräferenz geändert werden sollen.
Mit dem Selektor :has() kann die Eigenschaft color-scheme auf das Root-Element angewendet werden, wenn body die Klasse dark hat.

text-wrap

Bei Überschriften oder Bildunterschriften kommt es manchmal zu unschönen Zeilenumbrüchen, sodass in der letzten Zeile nur ein einziges Wort steht.
Mit dem Wert balance für die Eigenschaft text-wrap lassen sich Überschriften auf einer Website ausgewogener umbrechen.
Diese Funktion ist browserunabhängig, funktioniert in modernen Umgebungen gut und baut auf älteren Umgebungen graceful ab.

Scroll-margin

Bei Anchor-Links auf einer Webseite kann es passieren, dass das Zielelement wegen eines fixierten Headers verdeckt wird.
Mit der CSS-Eigenschaft scroll-margin lässt sich dieses Problem lösen, indem scroll-margin-top auf die Höhe des fixierten Headers gesetzt wird.
Mit dem Selektor :is kann dieselbe Behandlung auf mehrere Elemente wie h2, h3 und h4 angewendet werden; mit Einheiten wie ex oder lh lässt sich ein dynamischer Abstand festlegen.

4 Kommentare

amino014 2023-12-28

Das ist wirklich ein großartiger Tipp, danke.

arfwene 2023-12-27

Die Scrollbar ist gut.

xguru 2023-12-26

Die weiße Scrollbar sticht ziemlich heraus. Bei GeekNews habe ich es ebenfalls direkt für Dark und Light übernommen. Es gab also einen einfachen Weg.

kuroneko 2023-12-26

Im Vergleich mit Naver ist der Unterschied groß. GeekNews hat geschafft, was selbst Naver nicht(?) hinbekommt ...!