なぜ初期化する？
主な目的
- ブラウザのバグ対応を吸収する
- CSSのコード量減らす
- 自分の意図通りにCSSを書く
各ブラウザがCSSを自前で用意していることに起因。
ただ、ブラウザ標準のCSSはセマンティック(意味を付与する)なHTMLを読み込んだ時に、CSSを何も書かなくても読みやすくしてくれるので重要な役割。そのブラウザ標準CSSとうまく向き合っていこうというのが初期化CSS。
代表的な初期化CSSライブラリ
あくまでCSSを初期化するだけなので、BoostrapやFoundationなどのフレームワークのように数はない。 ここ抑えといたほうがいいよというものだけ抜粋。
| Name | License | Purpose | Comment | Github Star | Born | Last Update |
|---|---|---|---|---|---|---|
| resetcss by Eric Meyer | none (Public domain) | 各ブラウザのスタイルの差異をなくす。 | 一昔前の王道。古いので今は使わないが、知識として必須。この人のCSSを起にいろんな人がResetCSSを書いている。 | - | 2008.2.12 | 2011.1.26 |
| normalize.css | MIT | 便利なものはリセットしない。それ以外はresetcssと同じ。 | 最近の主流。Bootstrap等、有名なUIFrameworkの中でも数多く使われている。 | 23599 | 2012.8.15 | 2016.10.3 |
| sanitize.css | CC0 1.0 | ブラウザ対応保証。より開発者向けに特化。それ以外はnormalize.cssと同じ。 | Normalize.cssと同じ開発チームの人がつくった。モダンなCSSの書き方に対応していて、これから流行ると思われる。 | 2049 | 2015.3.18 | 2016.10.5 |
紹介ライブラリの解説参照サイト
@Mwrote の紹介
- プロダクトデザイン(たまび)
- GUIデザイン(前の会社)
- フロントエンドエンジニア <- いまここ