古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。

現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。
CSSの知見やテクニックも満載です!

サイトのキャプチャ

A Modern CSS Reset
A Modern CSS Reset -GitHub
by Andy Bell

他のCSSリセットが気になる人は、こちらも注目です。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

私は日々、CSSについて考えて楽しんでいます。それは、おそらくすべき以上のことも含まれているでしょう。そんな私が長年にわたって考えてきたことの一つが、CSSのリセットです。

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなり、無理なリセットやすべてをリセットする必要は全くありません。その頃は、normalize.cssなどのリセットが誕生して、わたし達をCSSの地獄から救ってくれました。しかし、そんな時代は過ぎ去り、現在ではブラウザの振る舞いも信頼できるようになったので、当時のようなリセットは冗長であると思います。

モダンブラウザに適切なデフォルトのCSSリセット

私が使用しているデフォルトのCSSリセットの内容とその理由を説明します。その前に、全体をお見せします。

各CSSリセットの解説

私が使用しているCSSリセットのそれぞれの理由を解説します。
まずは、box-sizingの定義から始めます。

すべての要素と疑似要素に対して、box-sizing: border-box;を定義します。
疑似要素はinheritで継承にすべきだと考える人もいますが、私はそれはばかげていると思います。なぜなら、別のbox-sizingの値を定義する場合は、その値を明示的に定義します。少なくとも、私はそのようにしています。
このbox-sizingについては、CSS From Scratchで私は詳しく解説しています。

box-sizingを定義した次に、各ブラウザごとのデフォルトのスタイルシートによって定義されたpaddingとmarginを一括でリセットします。これは説明不要でしょう。

一点だけ、リストについて説明します。「ul[class], ol[class]」は、class属性を持つリストを対象しており、classがないプレーンなリストには適用されません。これはulやolの通常のリストをリストのように見えるようにするためです。
多くのリセット(私が使用していたものも含め)はプレーンな状態で定義されていますが、私は積極的に取り除きます。

続いて、bodyのスタイルです。
私はbodyのデフォルトのスタイルは、シンプルにしています。コンテンツが空の場合でもビューポートを満たすのに役立つので、min-heightに100vhを定義しています。また、スムーズなアンカースクロールが好きなので、「scroll-behavior: smooth;」も定義しています。

bodyでは文字に関するスタイルを2つだけ定義します。
line-heightを1.5にしているのは、デフォルトの1.2ではアクセシブルで読みやすいテキストを表示できないためです。また、text-renderingをoptimizeSpeedにしています。optimizeSpeedを使用すると、テキストの見栄えは良くなりますが、ロード遅延のようなパフォーマンスの問題が発生する可能性があるので、現在はそれを避けるようにしています。しかし、マイクロコピーのようなテキストを美しく見せたい時には使用します。

paddingとmarginのルールと同様に、リスト要素にclass属性がある場合のみlist-styleをリセットします。

class属性がないリンクには「text-decoration-skip-ink: auto;」を定義して、下線がより読みやすく表示されるようにしています。これはすべてのリンクにも定義できますが、過去に小さな問題が発生したため、この形になりました。

画像のimg要素をブロック要素に定義したのは、率直に言って、下にできる隙間をなくすためです。また、私が制作するページでは、画像はブロック要素のように振る舞う傾向があります。

私はCSSのこのテクニックが非常に気に入っていて、勇気を出してCSSリセットに加えました。「* + *」はフクロウセレクタと呼ばれるもので、直接の子孫をターゲットにします。これに1emのトップマージンを定義します。
この定義により、コンテンツのフローに一定のリズムを与えることができます。また、.flowに定義し、ユーティリティとしても私は実際のプロジェクトで使用しています。詳細は24waysをご覧ください。実際に、私が最近最も使用しているCSSだと思います。

もう一つ、私がデフォルトのCSSリセットに勇気を出して加えたのは、入力要素に「font: inherit;」を定義したことです。
これでフォームのテキストが小さくなることは、もうありません!

最後は、ビジターが動きを望まない場合に、アニメーションやトランジションやスクロール動作をリセットする@mediaクエリです。私はこのリセットが好きで、詳細度の切り札!importantセレクタを使用しています。ビジターが動きを望まない場合は、このリセットに続くCSSに関係なく、動きを最低限にします。

@atomiksのおかげで、アニメーション終了とトランジション終了を監視するJavaScriptイベントを中断しないようにアップデートしました。

まとめ

ここで紹介したCSSリセットは非常に小さなCSSですが、私の人生はずっと楽になりました。もし気に入ったなら、あなたもこのCSSリセットを使用できます!
最新のコードは、GitHubNPMで見つけることができます。

sponsors

top of page

©2024 coliss