Фиксированные размеры Body?

[mladwiUverstalwik]

Доброго времени и доброго здоровья как новичкам так и Гуру!Подскажите почему наблюдается такой казус,при том когда у Body прописаны ширина,высота и фон,не имея содержания контейнер отображается на всю страницу?я что-то упустил?Прошу направить на путь истинный.С уважением.

[wwt]

если не задан фон у html то фон body начинает занимать все пространство, вообще это якобы баг https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

 

но мне кажется это наоборот фишка. Просто задайте белый фон у html и все заработает. https://jsfiddle.net/1n5rsb60/

[Igor Schnaider]

Это не баг, такое поведение определяет спецификация.

[wwt]

Это не баг, такое поведение определяет спецификация.

где в спецификации хоть слово про растягивание фона на все пространство браузера даже при фиксированных размерах у body и отсутствия фона у html?

[Igor Schnaider]

где в спецификации хоть слово про растягивание фона на все пространство браузера даже при фиксированных размерах у body и отсутствия фона у html?

 

link

[wwt]

 

где в спецификации хоть слово про растягивание фона на все пространство браузера даже при фиксированных размерах у body и отсутствия фона у html?

 

link

 

Мне кажется ты не понимаешь о чем речь. вот мой пример выше https://jsfiddle.net/1n5rsb60/

Убери фон у элемента html

[Igor Schnaider]

...и фон от body становится по всему вьюпорту. Вы об этом?

[wwt]

...и фон от body становится по всему вьюпорту. Вы об этом?

именно, это при том что у body заданы фиксированные размеры 100 на 100 пикселей!!! В спеке я в упор не вижу где сказано о том что body себя ведет так и при явных размерах, хотя теоретически должен вести как блочный элемент коим и является. И это не мои наблюдения, а ребят с css-tricks

[Igor Schnaider]

Там ведь так сказано:

 

For documents whose root element is an HTML HTML element [html401] or an XHTML html element[XHTML11]: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element.

 

А какие размеры вы поставите на body - тут вообще не имеет никакого значения.

[Sensei]

Это не баг.

По спеке, я так понимаю, есть такое понятие как Canvas, область, на которой происходит рендеринг.

Этот холст имеет размеры области просмотра и берет фон у элемента HTML.

А элемент  HTML, если у него не задан фон, берет его у элемента BODY.

Вот и получается, что фон на весь экран.

[wwt]

А какие размеры вы поставите на body - тут вообще не имеет никакого значения.

 

В том и суть что пока не прописывают фон элементу html или не ограничивают размеры body никто и знать не знает о таком поведении(если конечно не читал эту часть спецификации), но стоит лишь изменить одну из этих вещей и фон начинает вести себя не ожидаемым для пользователя образом. Это проблему заметили в одной из версий нормалайза когда там был прописан фон для html и люди не могли понять почему назначая фон для body они не получают заливки всего вьюпорта. такое поведение фона у body оправданно когда не трогают его размеры и не прописывают фон элементу html. Но как только разработчик прописывает у body размеры он ожидает что тот будет вести себя как любой другой блочный элемент, но этого не происходит в плане фона и в этом и минус который в спеке не описан, там описано так как будто бы никто и никогда не будет трогать размеры body и не будет прописывать фон для html. Кстати сказать в спеке css2 даже была рекомендация задавать фон именно для body, а не для html. Странная рекомендация при таком поведении не правда ли?

Это не баг.

По спеке, я так понимаю, есть такое понятие как Canvas, область, на которой происходит рендеринг.

Этот холст имеет размеры области просмотра и берет фон у элемента HTML.

А элемент  HTML, если у него не задан фон, берет его у элемента BODY.

Вот и получается, что фон на весь экран.

у html он остается по умолчанию transparent ибо при другом значении фон body перестанет себя так вести, так что его берет именно выше названный Canvas

[Igor Schnaider]

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

 

Не дословно:

Холст документа - это поверхность, на которой отрисовывается документ. Так как нет элементов, соответствующих канвасу, для того, чтобы стилизовать его, CSS распространяет фон от корневого элемента (html ← body)...

 

Поэтому когда меняете размеры body, на фон канваса это ведь никак повлиять не может.

[wwt]

Поэтому когда меняете размеры body, на фон канваса это ведь никак повлиять не может.

 

Да это понятно. Дело не только в фоне, а втом что когда от body ожидается поведение как у блочного элемента, коим он и является, вот эта фишка с фоном рабочей области лишняя, и люди не ожидают такого поведения, ибо body в большинстве случаем никто и не трогает. И собственно тема так и называется "Фиксирвоанные размеры body"

[Sensei]

BODY  — служебный элемент, в том смысле, что создается браузером даже в случае его отсутствия.

Поэтому я бы не стал относиться к нему, как к обычному элементу.

Нужны фиксированные размеры или еще какие свойства, создай DIV и делай че хочешь)

И фишка с фоном не лишняя, иначе бы пришлось каждый раз ради фона явно задавать высоту.

[wwt]

BODY  — служебный элемент, в том смысле, что создается браузером даже в случае его отсутствия.

Поэтому я бы не стал относиться к нему, как к обычному элементу.

Нужны фиксированные размеры или еще какие свойства, создай DIV и делай че хочешь)

И фишка с фоном не лишняя, иначе бы пришлось каждый раз ради фона явно задавать высоту.

То что браузер создает его в случаях если нет это дело парсера который приводит документ к единому виду в независимости от его структуры. В спецификации насколько помню такой рекомендации для создателей браузеров нет =)

Если относиться к body как к служебному элементу то у меня вопрос "нафига ему задан margin по умолчанию?" Ведь проще и правильнее создать div и делать с ним что хочешь =))

 

Я не говорю что эта фишка с фоном лишняя, я в первом же комментарии написал что считаю это именно фишкой, некоторые думают что это баг(это я видел в сети), но при этом мне кажется что фишка с фоном полезна только если body никто не трогает в плане размеров. Это ведь не явное поведение вот в чем суть, особенно учитывая привязку к фону html.

[Sensei]

"нафига ему задан margin по умолчанию?"

 

Думаю, затем же, зачем заданы отступы у параграфов или кегль у заголовков. Базовая типографика.

 

Это ведь не явное поведение вот в чем суть

 

Возможно, эта фишка чисто историческая.

Представьте, что вы создаете документ, используя только стандартные теги. Без CSS.

Тогда фон для BODY, который займет весь вьюпорт очень даже желателен)

[wwt]

Возможно, эта фишка чисто историческая. Представьте, что вы создаете документ, используя только стандартные теги. Без CSS. Тогда фон для BODY, который займет весь вьюпорт очень даже желателен)

 

Вот кстати я тоже склоняюсь к тому же мнению, что это наследие такое. Но в некоторых моментах мне кажется лишнее оно. К примеру можно делать прижатый футер без обертки https://jsfiddle.net/80u0o0Lk/

Но приходится задавать цвет у html, а то фон для body будет работать не так как надо. Хотя с другой стороны фон для страницы все равно задавать нужно, а при таком раскладе и body начинает работать как ожидаешь.