[Bootstrap 4] Twitter Bootstrap v4 には Normalize.css を fork した Reboot.css が利用されている
bootstrap-reboot.css で normalize するのも良さそうです。
[markdown]
こちらを参考にソースを確認しました。
> * [A Look at Bootstrap 4’s New Reset: Reboot.css ― Scotch](https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss)
## ソース
公式ドキュメント
> * [Reboot · Bootstrap](https://v4-alpha.getbootstrap.com/content/reboot/)
Reboot.css v4
> * [bootstrap/bootstrap-reboot.css at f5ad6e3987788ae5903a39384c49171bf52bd7b8 · twbs/bootstrap](https://github.com/twbs/bootstrap/blob/f5ad6e3987788ae5903a39384c49171bf52bd7b8/dist/css/bootstrap-reboot.css)
Normalize.css v7
> * [normalize.css/normalize.css at 73b6b0c7e8690ab5005bca9d7e13d3fb319c98ac · necolas/normalize.css](https://github.com/necolas/normalize.css/blob/73b6b0c7e8690ab5005bca9d7e13d3fb319c98ac/normalize.css)
## Reboot.css
> * [A Look at Bootstrap 4’s New Reset: Reboot.css ― Scotch](https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss)
### Box-Sizing: Border-Box Default
`box-sizing: border-box;` が設定されています。
### Use “rems” for Sizing and Spacing
`padding`, `margin`, `font-size` のサイズやスペースが、em ではなく `rem` 指定されています。
### Native Font Family
OS 標準の System Font が `font-family` に設定されています。
> * [System Font Stack | CSS-Tricks](https://css-tricks.com/snippets/css/system-font-stack/)
具体的には、[下記](https://github.com/twbs/bootstrap/blob/f5ad6e3987788ae5903a39384c49171bf52bd7b8/dist/css/bootstrap-reboot.css#L26)が指定されています。
“`css
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
“`
日本語フォントの場合は、悩ましいですね。。。
> * [font-familyで指定できるフォント名一覧](https://w3g.jp/sample/css/font-family#japanese)
> * [Font-familyメーカー：標準フォント一覧からサクッと指定](https://saruwakakun.com/font-family)
### Margin Top is Dead
`h1 – h6`, `p`, `ul`, `ol`, `dl`, `pre` が `margin-top: 0;` されています。
Nicholas さんは `table` も追加することを奨めています。
### Clean, Dead-Simple Base Elements
`blockquote`, `tables`, `forms` 関連が整えられています。
### Mobile Fast Click
`touch-action: manipulation;` で、クリックイベント発火遅延の対策がされています。
## 補遺
> Normalize.cssと_reboot.scssを比較してRebootで追加されたスタイルの中で特徴的な違いを以下に列挙します。
>
> – 全称セレクタでbox-sizingの指定
> – IE11とEdgeでスクロールバーがコンテンツと重なる挙動を回避する-ms-overflow-styleの指定
> – IE10以降で起こるが無視される挙動を回避する@-ms-viewportの指定
> – tabindex=”-1″が指定されている要素にフォーカスがあった時のアウトラインを消すoutlineの指定
> – a要素にhref属性が省略された際のプレースホルダーリンクのスタイルの指定
> – タッチスクリーンにおけるクリックイベント発火遅延の解消のtouch-actionの指定
>
> [Bootstrap v4で追加されたRebootというスタイルシートを見てみる | フロントエンドBlog | ミツエーリンクス](https://www.mitsue.co.jp/knowledge/blog/frontend/201708/17_1117.html)
[/markdown]