【CSS】Reset CSSやNormalize.css…。CSSリセットは何を使うべきか比較してみた

ブラウザ間のCSS差異をなくすため、表現を正確にするため、ブラウザデフォルトのCSSをリセットするCSSがあります。おそらくお使いの方も少なくないのではないでしょうか。

今日はそんなリセットCSSの流れをまとめて、今使うべきものを考えてみました。

初期段階

*{
    margin: 0;
    padding: 0;
    border: none;
}

昔のリセットは*セレクタを使い、全てをリセットしました。
コード的には短くスマートのようですが全ての要素にスタイルが適用されるため、inputタグも枠線がないなどの現象が生まれます。ゆえに、再定義という意味で必要以上にCSS記述をしないといけません。

たくさんあるCSS Reset script

CSS Reset | 2015’s most common CSS Resets to copy/paste, with documentation / tutorials

というWebページが有ります。
TOPにはmost popular CSS Reset scriptsと表示されています。

※ 使用されているランキングというわけではなさそうです
※ 若干情報が古いです（Normalize.cssは現在v3.0.2）

ざっと見ていきます

Eric Meyer’s “Reset CSS” 2.0
- 名の通り、Eric Meyer氏によって提唱されたreset scriptです。
HTML5 Doctor CSS Reset
- HTML5と名前が付いている通り、HTML5に特化しているのが特徴です。
Yahoo! (YUI3) Reset CSS
- User Interface Libraryのreset scriptです。結構前は人気がありましたが、現在はどうなんでしょう。
Universal Selector ‘*’ Reset
- 冒頭で述べた*セレクタをつかったreset scriptです。
Normalize.css
- これは少し特色があり、便利なデフォルトCSSは保持するようになっています。バグや一般的なブラウザの不整合を補正します。Chrome, Firefox, Opera, Apple Safari, IEなどに対応しています。

以下の様なセレクタがあると、HTML5に対応している感がありますね。

audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}