Webサイトに必ず追加したい最新CSSプロパティ3選

color-scheme

• Webサイトがダークモードに対応していても、スクロールバーが白く明るく光ってしまう問題がある
• color-scheme プロパティを dark light に設定すると、ブラウザにページがダークモードとライトモードの両方を処理できることを伝え、スクロールバーも暗くなる
• メタタグを使ってドキュメントに color-scheme を適用でき、これにより CSS を読み込む前にブラウザがユーザーの設定を把握できる
• prefers-color-scheme メディア機能と併用すると、ユーザーの設定に応じて変更する部分を完全に制御できる
• :has() セレクターを使って、body に dark クラスがあるときにルート要素へ color-scheme プロパティを適用できる

text-wrap

• 見出しやキャプションの改行が不自然になり、最後の行に単語が1つだけ残ることがある
• text-wrap プロパティで balance 値を使うと、Webサイトの見出しをバランスよく整えられる
• この機能はブラウザに依存せず、モダンな環境で適切に動作しつつ、古い環境でも自然にフォールバックする

Scroll-margin

• Webページでアンカーリンクを使うと、固定ヘッダーのせいで対象要素が隠れてしまう問題が発生する
• scroll-margin CSS プロパティを使い、scroll-margin-top の値を固定ヘッダーの高さに合わせることでこの問題を解決できる
• :is セレクターを使えば、h2、h3、h4 など複数の要素に同じ処理を適用でき、ex や lh のような単位を使って動的な余白を設定できる

[amino014]

これは本当に役立つコツですね、ありがとうございます

[arfwene]

スクロールバー、いいですね

[xguru]

スクロールバーが白いのはかなり目立ちますね。GeekNewsにも dark/light ですぐ適用してみました。簡単な方法があったんですね。

[kuroneko]

NAVERと比べてみると差が大きいですね。NAVERでもできない（？）ことをGeekNewsがやってのけました…！