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
Das ist wirklich ein großartiger Tipp, danke.
Die Scrollbar ist gut.
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.
Im Vergleich mit Naver ist der Unterschied groß. GeekNews hat geschafft, was selbst Naver nicht(?) hinbekommt ...!