リセットCSSとは各ブラウザが各々の歴史上の事情などで持っている、扱いづらい癖や、非互換性を解消するべく最初に読み込むCSSの決まり文句みたいなもの。
コピペで使うこともい多いが、bowerなどで呼び出して管理した方が最新版に更新するときなど便利な気がする。
ちょっと調べたので、幾つかのライブラリの癖などをメモ。
reset.css
meyerweb.com - CSS Tools: Reset CSS
- 元祖。v2.0でhtml5にも対応。
- 原理主義的にリセットする。
- ユニバーサルセレクタを利用していない。昨今のブラウザでは利用しても構わないと思うし、新しいタグとかできたら動作が不安。
Normalize.css
Normalize.css: Make browsers render all elements more consistently.
- reset.cssにインスパイアされて作成された。
- 有用なデフォルトスタイルは残している。
- リセットのための範囲の外にある一般的なPCおよびモバイルのバグを修正している。
- デバッガを汚し過ぎないように配慮している。
- モジュール化されている。
- 豊富なドキュメント
- ブラウザサポート
- Chrome (last two)
- Edge (last two)
- Firefox (last two)
- Internet Explorer 8+
- Safari 6+
- Firefox ESR, Opera (last two),
NPM
npm install --save normalize.css
Bower
bower install --save normalize-css
sanitize.css
- Normalize.cssと同じ作者が作成している。
- 有用なデフォルトはそのまま
- さまざまな種類のエレメントのスタイルがカスケードするように維持。
- バグの修正。ブラウザごとの異なるスタイルやバグを修正します。
- ユーザビリティの改善
- 最近の実装スタイルへの対応。
- ブラウザサポート
- Chrome 47-48+,
- Edge 12-13+,
- Firefox 43-44+,
- Internet Explorer 10-11,
- Opera 34-35+,
- Safari 8-9+,
- Android 4.3-4.4+, iOS 7-8+, Windows Phone 8.1+.
- 追加サポート Internet Explorer 9 と Safari 7.
NPM
npm install --save-dev sanitize.css
Bower
bower install --save sanitize-css
@import url("node_modules/sanitize.css/sanitize.css");
/* overwrite defaults in sanitize.css */
:root {
--root-box-sizing: border-box;
--root-font-family: "Open Sans", sans-serif;
--root-color: #333;
}
@import "node_modules/sanitize.css/sanitize.less";
// overwrite defaults in sanitize.less
@root-box-sizing: border-box;
@root-font-family: sans-serif;
@root-color: #333333;
// overwrite defaults in sanitize.scss
$root-box-sizing: border-box;
$root-font-family: "Open Sans", sans-serif;
$root-color: #333333;
import "node_modules/sanitize.css/sanitize.scss";
--
まとめ
デザインテーマの変更などはままあると思うので、sanitize.css が良いのかなと思います。
普及度や参照できる情報、とっつきやすさなどはNormalize.css のようなので、チーム開発などの場合にはこちらかと思います。
他にも幾つか出ているようなので、参考にしてコピペなどして折に触れて使用して見たいと思います。