Modern CSS Reset導入時のちょっとした注意

  • CSS
  • 小ネタ

はじめに

CSSリセットは、Normalize.cssressなど種々存在しています。皆さんどれを使われていますでしょうか。

各ブラウザで標準スタイルがあり、それをブラウザ間で差異をリセット、または揃えるためのスタイルシートがCSSリセットになります。

今現在、どの程度の差異があるのか把握していないですが結構厄介ですね。Webサイト開発時に、何かしらCSSリセットを導入するのが定石です。

今回、Modern CSS Reset [https://github.com/andy-piccalilli/modern-css-reset]を使ってみて、1つ注意しておきたいことがあったので記事にしておきます。

注意点

Modern CSS Resetの内容をさらっと見て、導入してしばらくしてから1つ気になることがありました。

スクロールの挙動が知らない間にスムーズスクロールになっている...🤷‍♂️」

見に覚えがなかったので「なんで...なんで?」状態でした。

そんな中、CSSリセットの内容を改めてチェックしたら次の記述がありました。

html:focus-within {
  scroll-behavior: smooth;
}

これかー。

なんでscroll-behaviorプロパティの記述があるんだという感じですが、意味があるから設定されているのでしょう。ひとまず、自分の場合は不要だったので打ち消して対処しました。

📖 scroll-behaviorプロパティについて: https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

余談 scroll-behavior: smooth について

スムーズスクロールの目的は、例えばページ内リンクや「ページトップに戻る」ボタン押下時にスクロール位置が変わる際に閲覧者が混乱しないようにするための配慮(だと思っているけど厳密にはどうなんだろう)なので、あった方がベターなんでしょうか。

なお、CSSプロパティだけではスクロール速度等の制御ができないため、細かく設定したい人はJavaScriptを利用する必要があります。加えて、まだSafariがプロパティをサポートしていない(2021年4月27日時点)ため、ポリフィルを読み込む必要があります。

scroll-behavior-polyfill [https://github.com/wessberg/scroll-behavior-polyfill]あたりを導入すればよいです。実際にこれで動作しました。

おわりに

以上、簡単でしたがModern CSS Reset導入時のちょっとした留意点でした。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚