ブラウザ間の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;
}
どれを使うべきか
話題となっているのはどれでしょうか。
検索ボリュームでみていくと、reset.cssとNormalize.cssが2013年あたりから逆転し、現在はNormalize.cssが人気度が高いですね。
先述しましたが、Normalize.cssは他のCSS Reset scriptと違って、ブラウザのスタイルを消去するのではなく、デフォルトのスタイルを保持した上で正常化(Normalize)するという考え方です。
ちなみに、
- Soundcloud
- Github
- Medium
- Bootstrap
- Guardian
などがNormalize.cssを採用しています。
まとめ
Normalize.cssがベストプラクティスといっていいと思います。
しかし、そもそもResetとNormalizeという考え方が異なるので、その点は意識しておく必要があります。
もっと違いや特徴を知りたい場合は、What is the difference between Normalize.css and Reset CSS? – Stack Overflowを御覧ください。
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事