質問: 私個人は、今までなんとなく `html` か `body` に書いていたのですが、Bootstrapを見たら以下のようになっていました。 ``` html { font-family: sans-serif; ... } ``` ``` body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ... } ``` 疑問 ・なぜ`html`に`font-family`の内容を直接指定しないのか ・`html`と`body`の内容が違う理由 Normalizeに記載されているようでその名残?とも思ったのですが、調べてもよく分かりませんでした。 変更されたコミットはのようです。 不思議な書き方をしている理由等をご存知でしたらお教えください。
回答: > > Bootstrapはなぜhtmlとbody両方にfont-familyを記述しているのか? > > > 質問文に書かれている二つの疑問点は上記の疑問から発生している気がするので、まずはこちらについて回答します。`html` 要素の `font-family` プロパティは、 normalize.css から Reboot へ移行するときに、一部のスタイルを normalize.css からそのまま移したために残っているに過ぎません。`html` 要素の子要素のうち、表示されている要素が `body` 要素のみだとすれば、これは**明らかに無意味な記述**です。そして、 `html` 要素の `font-family` プロパティは**冗長な記述として削除される予定です**。 > > ・なぜhtmlにfont-familyの内容を直接指定しないのか > > > ブラウザの設定を調整することでデフォルトのルートフォントサイズを調整出来るように、 Bootstrap では `html` 要素のフォントサイズが指定されておらず、 `body` 要素に `font-size: 1rem` が指定されています。そのため、 `html` 要素へ `font-family` プロパティを指定するよりも、 `font-*` プロパティやグローバルなプロパティを `body` 要素へまとめてしまったほうが読みやすくなると思います。実際のところは分からないため推測になりますが、こういった背景から `font-family` プロパティも `html` 要素ではなく `body` 要素に指定されているのではないでしょうか。 > > ・htmlとbodyの内容が違う理由 > > > 最初に書いたとおり、一方は normalize.css からそのまま移しただけの (実際には使われない) スタイルで、他方は実際に Bootstrap で使われているスタイルであるため、この二つの値で同期が取れていないほうが自然です。 参考: * Reboot & Type cleanup by MartijnCuppens · Pull Request #28698 · twbs/bootstrap · GitHub * Reboot · Bootstrap * Typography · Bootstrap * GitHub - twbs/rfs: ✩✩✩ Automates responsive resizing ✩✩✩