Canvas 背景和 HTML <body> 元素

Question

根据 spec:

It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

但是并没有说它有什么优势。为什么规范推荐这个？

P.S。当我看到 Extra scrollbar when body height is 100vh 时，我想到了：将背景简单地提供给 html 元素不是更好吗？

Answer 1

在 CSS 之前，通过将 background 和 bgcolor 属性添加到 HTML 中的 body 元素来指定背景（以及类似的text、link、alink、vlink、leftmargin、marginwidth、topmargin 和 marginheight）。

CSS 兼容的浏览器将这些表示属性转换为适当的样式规则，作为作者级别的表示提示放置，其优先级低于作者级别 * 规则。 css-cascade-3 and HTML 中有更多相关信息。即，对于 body 元素，background 和 bgcolor 属性分别转换为 background-image 和 background-color 声明。

因此，建议作者为 body 元素而不是 html 元素指定 canvas 背景是为了简化遗留 HTML 文档从body 元素上的表示属性更改为 CSS。通常，如果您同时控制了标记和 CSS，您可能想要做的第一件事就是摆脱表示属性。但是您不必立即这样做；您可以只添加特定于 body 元素的 background 声明，它将无缝替换整个页面背景（如问题中规范 link 中所述），如演示文稿所指定属性，无需进一步操作：

/* 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's yellow!

如果您将它添加到 html 元素，您最终会得到两个背景：

/*
body {
  background-color: #FFFFFF;
}
*/

html {
  background-color: yellow;
}

<body bgcolor=#FFFFFF>
  <h1>Hello world!</h1>
  <p>This page was once white...
  <p>... wait, what?

如果您知道 body 元素具有 bgcolor 属性，这确实具有视觉提醒您摆脱该属性的优势。但是，如果您没有立即想到这一点，您可能会被留下 flummoxed。

当然，如果您正在编写新文档，那么这将成为一个传统问题（与整个 "ease of migration" 相关）。没有什么可以阻止您将背景应用于 html 和 body 以获得有趣的效果，尽管即使这样在很大程度上已被添加多个背景层的能力所取代一个元素，只有在您需要支持旧版浏览器时才是真正必要的。在上面的 link 中有更多相关信息。

Answer 2

这实际上是一个偏好问题，这就是为什么推荐而不是作为严格规则强制使用的原因。

作为 html 标签后代的 body 标签会覆盖 html 属性 - 否则为 background。

但是，由于所有浏览器都默认为 body 留出边距 ，因此在 body 和浏览器 window 之间创建了一个边框（虽然我们习惯于将这个边距重置为 0），我想这个 ...border 本来是可见的，所以在 HTML 上使用背景会使这个边框对用户不可见。鉴于这一事实，并且由于所有内容都包含在 body 标签内，建议由规范提供。

然而，现在 body 标签通常被几乎每个人都重置为 0，因此在 html 或 body 标签上使用它没有区别，并且每种情况都没有比较优势给另一个。

Answer 3

我的回答会更快，因为 BoltClock 的答案和规范解释得很详细。

这是效率问题。

如果您考虑 UA 应该“[使用] BODY 元素的背景属性的值作为它们的初始值”，那么将这些值分配给 body 标签。如果使用 html 标签，UA 可能会使用一种 fallback 来显示它，这很耗时。当然，对于现在的电脑来说，这算不了什么，但是移动设备呢，显示一张带封面的背景图片background-size?

此外，html标签的顺序是合乎逻辑的，link标签定义在头部，以便body和他的孩子使用来了。但是，如果您将 css 规则应用于 html 标记，则 UA 可能会向后...然后向前。

那么给BODY元素指定canvas背景有什么好处呢？对你来说没什么，但对用户来说是几微秒，对客户端和服务器来说是几微瓦，但小流汇成大河。

w3c 可能决定反其道而行之，它也可以，这只是一个标准的目的，即你做出浏览器对你的期望。

什么？ iOS不尊重规则？（他们可以，他们是苹果）。不要改变正确的方法，使用 media queries.

Canvas 背景和 HTML <body> 元素

The Canvas Background and the HTML <body> Element

html

css

specifications

background