[Bootstrap 4] Twitter Bootstrap v4 には Normalize.css を fork した Reboot.css が利用されている
bootstrap-reboot.css で normalize するのも良さそうです。
こちらを参考にソースを確認しました。
Contents
ソース
公式ドキュメント
Reboot.css v4
Normalize.css v7
Reboot.css
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
具体的には、下記が指定されています。
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
日本語フォントの場合は、悩ましいですね。。。
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 | ミツエーリンクス