HTML vs Body в CSS
HTML&CSS

HTML vs Body в CSS

Оригинал: HTML vs Body in CSS, Geoff Graham

Разница между <html> и <body> очевидна. Это, пожалуй, одна из тех вещей, которые попадают в категорию тривиальных. Тем не менее, у меня есть плохая привычка применять глобальные стили к <body>, а если что-то не работает, переносить в <html>, не задумываясь.

Тем не менее, и новичкам и ветеранам неплохо понимать различия между этими элементами. В этой статье мы поговорим о них, а также рассмотрим некоторые примеры, когда имеет смысл применение стилей к тому или иному элементу.

Как связаны html и body

Рассмотрим стандартную структуру для базового HTML документа:


<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Metadata and such -->
    </head>

    <body>
        <!-- Where the content begins -->
    <body>
</html>

Спецификация определяет <html> как корневой элемент документа, и мы ясно видим, что в приведенном примере <html> является элементом самого верхнего уровня. Здесь нет уровней, откуда могли бы быть унаследованы стили.

Непосредственно в <html> находятся только два элемента: <head> и <body>. На самом деле, спецификация определяет <body> прямо противоположно <head>, поскольку это два элемента, которые необходимо различать.

Итак, суть в том, что <html> является корневым элементом документа, а <body> является потомком, содержащимся в нем. Cелектор :root в CSS и html определяют одно и то же:


:root {

}
html {

}

Единственное отличие в том, что :root имеет большую специфичность: (0, 0, 1, 0) против (0, 0, 0, 1).

Таким образом, мы всегда должны применять глобальные стили к <html>, не так ли?

Это наталкивает на мысль, что все стили, которые должны быть унаследованы всеми элементами, необходимо применять к <html>, поскольку это корневой элемент в документе. Элемент <html> идет выше <body> в иерархии, поэтому должен содержать все глобальные стили.

Но это не совсем так. На самом деле, ряд атрибутов в спецификации изначально был связан с элементом <body>:

  • background
  • bgcolor
  • marginbottom
  • marginleft
  • marginright
  • margintop
  • text

Поскольку эти атрибуты в настоящее время считаются устаревшими, рекомендуется вместо них использовать соответствующие CSS свойства:

АтрибутCSS свойство
backgroundbackground
bgcolorbackground
background-color
marginbottommargin-bottom
marginleftmargin-left
marginrightmargin-right
margintopmargin-top
textfont

Учитывая, что эти свойства CSS возникли из встроенных атрибутов, которые были связаны с <body>, представляется целесообразным применять их непосредственно к <body> в CSS, а не к элементу <html>.

Таким образом, мы всегда должны применять глобальные стили к <body>, не так ли?

Ну, не совсем. Все-таки есть ситуации, где имеет смысл применить стили к <html>. Давайте рассмотрим пару таких сценариев.

Работа с единицами измерения rem

Единица измерения rem связана с корнем документа. Например, если написать что-то вроде этого:


.module {
    width: 40rem;
}

Единица измерения rem рассчитывается относительно font-size элемента <html>, который является корнем документа. Таким образом, класс .module будет масштабироваться относительно корневого уровня.

Классический пост Джонатана Снука прекрасно иллюстрирует, как задать font-size элемента <html> в процентах для работы с rem.

Хитрый background-color

Существует одна странная вещь в CSS, если задать background-color элементу <body>, он заливает весь вьюпорт, даже если элемент не занимает все пространство. Если при этом задать background-color для <html>, этого не происходит.

Подводя итог

Надеюсь, эта статья проливает некоторый свет на ключевые различия между использованием <html> и <body> в CSS. Есть также различия в JavaScript. Например, получить элемент <html> можно с помощью document.rootElement, а <body> с помощью document.body.

Мы могли бы, конечно, более детально рассмотреть технические различия между ними, но цель в данном случае, углубить понимание, чтобы принимать более обоснованные решения при написании CSS.

Есть ли у вас другие примеры, где это имеет смысл задавать стили именно для <html> или для <body>?

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться