· 1分で読了
CSS の 1 行でスムーズなスクロールを行う方法
# フロントエンド この記事は中国語から自動翻訳されたものです。翻訳によりニュアンスが失われている場合があります。
楽しく Svelte で smooth-scroll を実装した後、実は一行の CSS で実現できることに気づきました：
html {
scroll-behavior: smooth;
}ブラウザのサポートについては少し気にする必要がありますが、開発者がライブラリを導入したり、自分で実装したりする手間を完全に省くことができます。
smooth-scroll を完璧に達成できて、hashchange や state change の動作を書き換える必要もありません。今度は CSS を使わずに smooth-scroll を実現する方法について記事を書こうと思います。
関連記事
- CSS field-sizing — 1行のCSSでフォーム要素を自動リサイズさせるtextarea の自動高さ調整は、以前は scrollHeight を監視する JavaScript が必要だった。CSS field-sizing: content なら1行で済む。textarea・input・select に対応。
- 超リンクの下線をもっときれいに見せる：text-underline-offsetデフォルトでは下線が文字にかなり近く、こういう見た目を好まないデザイナーもいる。僕自身も、あまりきれいだとは思っていない。
- なぜウェブは Pixel Perfect を追求すべきではないのかPixel Perfect が本当に重要なときだけそれを気にすべきであり、そうでなければ往々にして双方にとって損な結果になる。
- CSS の HSL で色を書こう！（そしてより良い方法）Web開発において、従来の HEX や RGB の色表現は広く使われているものの、読みやすさや直感性に欠ける問題があり、P3 のような広色域では表現力にも限界がある。HSL（色相、彩度、明度）は、より直感的に色を定義できる方法であり、開発者が色を理解し調整しやすくしてくれる。HSL は色相・彩度・明度の3つの軸で色を表すため、特にデザインシステムにおいて、カラーパレットの明度変化をより自然に扱える。