[Bootstrap 4] Twitter Bootstrap v4 には Normalize.css を fork した Reboot.css が利用されている

bootstrap-reboot.css で normalize するのも良さそうです。

こちらを参考にソースを確認しました。

ソース

公式ドキュメント

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 に設定されています。

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, premargin-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 | ミツエーリンクス