各種CSSリセットの比較

HTML/CSS WebDesign

各種CSSリセットのファイルサイズと適用結果の比較

いろいろなブラウザのユーザーエージェントスタイル(UserAgentStyle)の違いによる表示のズレを統一するために、公開されているCSSリセットを利用する方も多いかと思います。
今回は、最近良く使われている各種CSSリセットについて、ファイルサイズと主なhtml要素への適用結果について比較してみました。
今回比較したCSSリセットは以下のとおりです。

  1. Eric Mayer’s Reset CSS 2.0
  2. HTML5 Doctor Reset CSS
  3. Normalize.css
  4. ress
  5. sanitize.css

下の比較結果を見てもわかりますが、これら五つのCSSリセットは二つのタイプに分けることができます。
一つはユーザーエージェントスタイルをなくしていくタイプで、もう一つはスタイルを整えていくタイプです。
「1.Eric Mayer’s Reset CSS 2.0」と「2.HTML5 Doctor Reset CSS」はユーザーエージェントスタイルをなくしてしまうタイプのCSSリセットで、「3.Normalize.css」、「4.ress」、「5.sanitize.css」は使いやすい感じにスタイルを整えてくれるタイプのCSSリセットになると思います。
ユーザーエージェントスタイルをなくしてしまうタイプのCSSリセットでは、なんのスタイルもあたっていない状態からスタートするので使用する要素のスタイルについて全部自分でスタイルを当てていきたいときに使いやすいかと思います。
一方、スタイルを整えてくれるタイプのCSSリセットは、ある程度使いやすいようにスタイルを整えてくれるのでCSSリセットまかせでスタイルを指定して、修正が必要な部分だけ自分でスタイルを当てていきたいときに使いやすいかと思います。

CSSリセットの比較結果

それでは、比較結果をみてみましょう。
参考のために、CSSリセットなしの状態も載せてあります。(使用ブラウザはChromeです。)

CSSのリセットなし Eric Mayer’s Reset CSS 2.0 HTML5 Doctor Reset CSS
サイズ:0KB サイズ:1KB サイズ:2KB
CSSリセットを使用していない状態 Eric Mayer’s Reset CSS 2.0を使用した状態 HTML5 Doctor Reset CSSを使用した状態
Normalize.css ress sanitize.css
サイズ:5.99KB サイズ:6.62KB サイズ:9.3KB
Normalize.cssを使用した状態 ressを使用した状態 sanitize.cssを使用した状態

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください