Bootstrap v4で追加されたRebootというスタイルシートを見てみる
UI開発者 郡司CSS設計を行うとき、各ブラウザ上にデフォルトで指定されているスタイルを初期化するリセットCSS、初期化ではなくノーマライズするノーマライズCSSを始めに適用するのがベターな方法かと思います。そこから、デザインにあわせてサイトのベースとなるスタイルを上書きする、あるいはリセットCSSないしノーマライズCSSにミックスするなど、人それぞれの方法でサイト全体のベースとなるスタイルを定義するでしょう。
HTML/CSSフレームワークとして人気のBootstrapから、v4のAlpha版公開から約2年の月日を経て、2017年8月10日にBeta版が公開されました。その主要な変更点の中に以下の項目があります。
「Normalize.cssをフォークし、Rebootという名の新しいスタイルシートで独自のスタイルを定義しました」
このRebootと言う名の独自のスタイルはAlpha版からありましたが、Beta版がリリースされたこともあり、今回はNormalize.cssと_reboot.scssを比較してRebootで追加されたスタイルの中で特徴的な違いを以下に列挙します。
- 全称セレクタで
box-sizingの指定 - IE11とEdgeでスクロールバーがコンテンツと重なる挙動を回避する
-ms-overflow-styleの指定 - IE10以降で起こる
<meta name="viewport">が無視される挙動を回避する@-ms-viewportの指定 tabindex="-1"が指定されている要素にフォーカスがあった時のアウトラインを消すoutlineの指定- a要素にhref属性が省略された際のプレースホルダーリンクのスタイルの指定
- タッチスクリーンにおけるクリックイベント発火遅延の解消の
touch-actionの指定
Normalize.cssと比較するとrem単位の使用や、フォーム要素のtype属性を使ったスタイル指定の多さなどが目立ちました。個人的に印象に残ったのは、各ブラウザ固有スタイルへの調整がNormalize.cssよりも多く適用されていたり、DOMがJavaScriptで変更されることを想定したスタイル指定がされていたことです。
Bootstrapに合わせてカスタマイズされたスタイル指定の手法は、新規サイトを構築する際にも進んで取り入れたい内容と感じました。 これを期に自分のCSS設計の指針と照らし合わせ、CSSフレームワークの思想を取り入れた独自のリセットCSS、ノーマライズCSSなどを検討してみても面白いのではないでしょうか。