古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset
Post on:2019年10月7日
sponsors
モダンブラウザをターゲットにした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リセットの内容とその理由を説明します。その前に、全体をお見せします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/* Box sizing rules */ /* Box sizingの定義 */ *, *::before, *::after { box-sizing: border-box; } /* Remove default padding */ /* デフォルトのpaddingを削除 */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ /* デフォルトのmarginを削除 */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ /* bodyのデフォルトを定義 */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* Remove list styles on ul, ol elements with a class attribute */ /* class属性を持つul、ol要素のリストスタイルを削除 */ ul[class], ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ /* classを持たない要素はデフォルトのスタイルを取得 */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ /* img要素の扱いを簡単にする */ img { max-width: 100%; display: block; } /* Natural flow and rhythm in articles by default */ /* article要素内の要素に自然な流れとリズムを定義 */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ /* inputやbuttonなどのフォントは継承を定義 */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ /* 見たくない人用に、すべてのアニメーションとトランジションを削除 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } |
各CSSリセットの解説
私が使用しているCSSリセットのそれぞれの理由を解説します。
まずは、box-sizingの定義から始めます。
|
1 2 3 4 5 |
*, *::before, *::after { box-sizing: border-box; } |
すべての要素と疑似要素に対して、box-sizing: border-box;を定義します。
疑似要素はinheritで継承にすべきだと考える人もいますが、私はそれはばかげていると思います。なぜなら、別のbox-sizingの値を定義する場合は、その値を明示的に定義します。少なくとも、私はそのようにしています。
このbox-sizingについては、CSS From Scratchで私は詳しく解説しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* Remove default padding */ /* デフォルトのpaddingを削除 */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ /* デフォルトのmarginを削除 */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } |
box-sizingを定義した次に、各ブラウザごとのデフォルトのスタイルシートによって定義されたpaddingとmarginを一括でリセットします。これは説明不要でしょう。
一点だけ、リストについて説明します。「ul[class], ol[class]」は、class属性を持つリストを対象しており、classがないプレーンなリストには適用されません。これはulやolの通常のリストをリストのように見えるようにするためです。
多くのリセット（私が使用していたものも含め）はプレーンな状態で定義されていますが、私は積極的に取り除きます。
|
1 2 3 4 5 6 |
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } |
続いて、bodyのスタイルです。
私はbodyのデフォルトのスタイルは、シンプルにしています。コンテンツが空の場合でもビューポートを満たすのに役立つので、min-heightに100vhを定義しています。また、スムーズなアンカースクロールが好きなので、「scroll-behavior: smooth;」も定義しています。
bodyでは文字に関するスタイルを2つだけ定義します。
line-heightを1.5にしているのは、デフォルトの1.2ではアクセシブルで読みやすいテキストを表示できないためです。また、text-renderingをoptimizeSpeedにしています。optimizeSpeedを使用すると、テキストの見栄えは良くなりますが、ロード遅延のようなパフォーマンスの問題が発生する可能性があるので、現在はそれを避けるようにしています。しかし、マイクロコピーのようなテキストを美しく見せたい時には使用します。
|
1 2 3 4 |
ul[class], ol[class] { list-style: none; } |
paddingとmarginのルールと同様に、リスト要素にclass属性がある場合のみlist-styleをリセットします。
|
1 2 3 |
a:not([class]) { text-decoration-skip-ink: auto; } |
class属性がないリンクには「text-decoration-skip-ink: auto;」を定義して、下線がより読みやすく表示されるようにしています。これはすべてのリンクにも定義できますが、過去に小さな問題が発生したため、この形になりました。
|
1 2 3 4 |
img { max-width: 100%; display: block; } |
画像のimg要素をブロック要素に定義したのは、率直に言って、下にできる隙間をなくすためです。また、私が制作するページでは、画像はブロック要素のように振る舞う傾向があります。
|
1 2 3 |
article > * + * { margin-top: 1em; } |
私はCSSのこのテクニックが非常に気に入っていて、勇気を出してCSSリセットに加えました。「* + *」はフクロウセレクタと呼ばれるもので、直接の子孫をターゲットにします。これに1emのトップマージンを定義します。
この定義により、コンテンツのフローに一定のリズムを与えることができます。また、.flowに定義し、ユーティリティとしても私は実際のプロジェクトで使用しています。詳細は24waysをご覧ください。実際に、私が最近最も使用しているCSSだと思います。
|
1 2 3 4 5 6 |
input, button, textarea, select { font: inherit; } |
もう一つ、私がデフォルトのCSSリセットに勇気を出して加えたのは、入力要素に「font: inherit;」を定義したことです。
これでフォームのテキストが小さくなることは、もうありません！
|
1 2 3 4 5 6 7 8 |
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } |
最後は、ビジターが動きを望まない場合に、アニメーションやトランジションやスクロール動作をリセットする@mediaクエリです。私はこのリセットが好きで、詳細度の切り札!importantセレクタを使用しています。ビジターが動きを望まない場合は、このリセットに続くCSSに関係なく、動きを最低限にします。
@atomiksのおかげで、アニメーション終了とトランジション終了を監視するJavaScriptイベントを中断しないようにアップデートしました。
まとめ
ここで紹介したCSSリセットは非常に小さなCSSですが、私の人生はずっと楽になりました。もし気に入ったなら、あなたもこのCSSリセットを使用できます！
最新のコードは、GitHubやNPMで見つけることができます。
sponsors
