各種CSSリセットの比較
各種CSSリセットの紹介
いろいろなブラウザのユーザーエージェントスタイル(UserAgentStyle)の違いによる表示のズレを統一するために、公開されているCSSリセットを利用する方も多いかと思います。
今回は、最近良く使われている各種CSSリセットについて、ファイルサイズと主なhtml要素への適用結果について比較してみました。
今回比較したCSSリセットは以下のとおりです。
- Eric Mayer’s Reset CSS 2.0
- HTML5 Doctor Reset CSS
- The New CSS Reset
- Normalize.css
- ress
- sanitize.css
- A modern CSS Reset
- CSS Remedy
- Reboot css
下の比較結果を見てもわかりますが、これらのCSSリセットは二つのタイプに分けることができます。
一つはユーザーエージェントスタイルをなくしていくタイプで、もう一つはスタイルを整えていくタイプです。
今回紹介した中では、
「1.Eric Mayer’s Reset CSS 2.0」と「2.HTML5 Doctor Reset CSS」そして「3.The New CSS Reset」はユーザーエージェントスタイルをなくしてしまうタイプのCSSリセットで、それ以外のものは使いやすい感じにスタイルを整えてくれるタイプのCSSリセットになると思います。
ユーザーエージェントスタイルをなくしてしまうタイプのCSSリセットでは、なんのスタイルもあたっていない状態からスタートするので使用する要素のスタイルについて全部自分でスタイルを当てていきたいときに使いやすいかと思います。
一方、スタイルを整えてくれるタイプのCSSリセットは、ある程度使いやすいようにスタイルを整えてくれるのでCSSリセットまかせでスタイルを指定して、修正が必要な部分だけ自分でスタイルを当てていきたいときに使いやすいかと思います。
各種CSSリセットのファイルサイズと適用結果の比較
それでは、比較結果をみてみましょう。
それぞれのCSSリセットのファイルサイズと、主なHTML要素がどのように表示されるかについて比較してみました。
参考のために、CSSリセットなしの状態も載せてあります。(使用ブラウザはChromeです。)
CSSのリセットなし |
---|
ファイルサイズ:0KB |
![]() |
Eric Mayer’s Reset CSS 2.0 | HTML5 Doctor Reset CSS | The New CSS Reset |
---|---|---|
ファイルサイズ:1.09KB | ファイルサイズ:1.77KB | ファイルサイズ:0.60KB |
![]() |
![]() |
![]() |
Normalize.css | ress | sanitize.css |
---|---|---|
ファイルサイズ:6.14KB | ファイルサイズ:6.78KB | ファイルサイズ:9.53KB |
![]() |
![]() |
![]() |
A modern CSS Reset | CSS Remedy | Reboot css |
---|---|---|
ファイルサイズ:1.22KB | ファイルサイズ:4.04KB | ファイルサイズ:5.88KB |
![]() |
![]() |
![]() |
以上、主なCSSリセットについて比較してみました。
各CSSリセットで今回比較した要素以外でも違いが出てくるとは思いますが、参考になれば幸いです。
コメントを残す