Подтвердить что ты не робот

Фон холста и элемент HTML <body>

В соответствии с spec:

Рекомендуется, чтобы авторы HTML-документов указывали фон canvas для элемента BODY, а не элемент HTML.

Но он не говорит, какие у него есть преимущества. Почему спецификация рекомендует это?

P.S. Это перешло мне в голову, когда я увидел Дополнительную полосу прокрутки, когда высота тела 100vh: не лучше ли вместо фона вместо фона html?

4b9b3361

Ответ 1

До CSS фоны были заданы добавлением атрибутов background и bgcolor к элементу body в HTML (наряду с подобными text, link, alink, vlink, leftmargin, marginwidth, topmargin и marginheight).

CSS-совместимые браузеры преобразуют эти презентационные атрибуты в соответствующие правила стиля, помещенные как презентационные подсказки автора, с меньшим приоритетом, чем правила уровня * автора. Подробнее об этом в css-cascade-3 и HTML. А именно, атрибуты background и bgcolor преобразуются в объявления background-image и background-color соответственно для элемента body.

Итак, рекомендация о том, что авторы указали фон canvas для элемента body, а не элемент html, была сделана для облегчения миграции устаревших HTML-документов из атрибутов представления в элементе body в CSS. Обычно, если у вас есть контроль над разметкой и CSS, первое, что вы, вероятно, захотите сделать, это избавиться от атрибутов презентации. Но вам не нужно делать это сразу с места в карьер; вы можете просто добавить объявление background, специфичное для элемента body, и оно будет легко заменять весь фон страницы (как описано в ссылке spec в вопросе), как указано в атрибутах презентации, без каких-либо дополнительных действий:

/* The bgcolor attribute is equivalent to a

body {
  background-color: #FFFFFF;
}

rule at this position in the stylesheet,
except with less precedence than a * rule.
The following rule will override it as a
normal part of the cascade. */

body {
  background-color: yellow;
}
<body bgcolor=#FFFFFF>
  <h1>Hello world!</h1>
  <p>This page was once white...
  <p>... now it yellow!

Ответ 2

На самом деле это вопрос предпочтения, поэтому рекомендуется, а не принудительно, как строгое правило.

Тег body, являющийся потомком тега html, переопределяет свойства html - в противном случае background.

Однако, поскольку все браузеры предоставляют по умолчанию body , создавая границу между body и окном браузера (хотя мы используем для сброса этого поля на 0) Я предполагаю, что эта... граница должна была быть видимой, поэтому использование фона в HTML сделает эту границу невидимой для пользователей. Учитывая этот факт, и поскольку все содержимое содержится внутри тега body, рекомендация была предоставлена ​​спецификацией.

Однако в настоящее время тег body обычно reset to 0 почти для всех, поэтому его использование на теге html или body не имеет значения, и каждый случай не дает преимуществ по сравнению с другим.

Ответ 3

Мой ответ будет более быстрым, потому что BoltClock один и спецификация подробно объясняют это.

Это вопрос эффективности.

Если вы думаете о том, что UA должен "[использовать] значения этих свойств фона элемента BODY - их начальные значения", имеет смысл присвоить эти значения телу body. Если вы используете тег html, UA может использовать своего рода резерв, чтобы отобразить его, что требует много времени. Конечно, это ничего не значит для сегодняшних компьютеров, но как насчет мобильных устройств, показывая, пусть сказал фоновое изображение с обложкой фонового размера?

Кроме того, порядок html-тегов является логическим, теги ссылок определены в голове, чтобы использоваться для тела и его детей, которые приходят после. Но если вы примените правило css к тегу html, UA может вернуться назад... И затем вперед.

Итак, каковы преимущества указания фона холста для элемента BODY? Ничего, для вас, но несколько микросекунд для пользователя, некоторые микроволны для клиента и серверов, но небольшие потоки делают большие реки.

w3c, возможно, решил сделать обратное, это тоже будет нормально, это просто цель стандарта, что вы делаете то, что браузер ожидает от вас.

Что? iOS не соблюдает правила? (они могут, это яблоко). Не изменяйте правильный способ сделать это, используйте медиа-запросы.