Home>

I personally wrote something inhtmlorbodyuntil now, but when I looked at Bootstrap, it was as follows.

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 ";
  ...
}

Questions
・ Why don't you specify the contents offont-familydirectly inhtml
・ The reason whyhtmlandbodyare different

It seems to be listed in Normalize, and the remnant? I thought, but I couldn't understand it even after examining it.

Changed commits are https://github.com/twbs/ It looks like bootstrap/commit/4fa7749442ea7ab609d1c8c25dc4ba750194e542 .

If i know why i am writing in a strange way, please let me know.

  • Answer # 1

      

    Why does Bootstrap describe font-family in both html and body?

    The two questions in the question text seem to arise from the above questions. Thefont-familyproperty of thehtmlelement remains because some styles were moved from normalize.css as they were when moving from normalize.css to Reboot It is only If thehtmlelement's child elements are the onlybodyelements, this is aapparently meaningless descriptionAnd thefont-familyproperty of thehtmlelement will beremoved as a redundant description.

      

    ・ Why not specify the content of font-family directly in html

    In order to adjust the default root font size by adjusting the browser settings, Bootstrap does not specify thehtmlelement font size, andbodyfont-size: 1remis specified for the element. Therefore, instead of specifying thefont-familyproperty in thehtmlelement, set thefont-*property or global property tobodyelement. From the background, thefont-familyproperty is not ahtmlelement, but abodyelement. Isn't it specified?

      

    ・ Reasons for different contents of html and body

    As I wrote at the beginning, one of these styles was just moved from normalize.css (not actually used), and the other was actually used by Bootstrap. It ’s natural that you are out of sync.


    Reference:

    Reboot&Type cleanup by MartijnCuppens · Pull Request # 28698 · twbs/bootstrap · GitHub

    Reboot · Bootstrap

    Typography · Bootstrap

    GitHub-twbs/rfs: ✩✩✩ Automates responsive resizing ✩✩✩