根据规范:
建议HTML文档作者将画布背景指定为BODY元素,而不是HTML元素。
但它并没有说明这样做有什么优势。为什么规范要这样建议呢?
P.S.当我看到body高度为100vh时出现额外滚动条时,我突然想:把背景直接给html
元素会不会更好呢?
根据规范:
建议HTML文档作者将画布背景指定为BODY元素,而不是HTML元素。
但它并没有说明这样做有什么优势。为什么规范要这样建议呢?
P.S.当我看到body高度为100vh时出现额外滚动条时,我突然想:把背景直接给html
元素会不会更好呢?
background
和bgcolor
属性添加到HTML中的body
元素来指定的(以及其他类似于text
、link
、alink
、vlink
、leftmargin
、marginwidth
、topmargin
和marginheight
的属性)。符合CSS标准的浏览器会将这些表现属性转换为相应的样式规则,作为作者级别的表现提示,优先级仅低于作者级别的*
规则。有关此内容的更多信息,请参见css-cascade-3和HTML。即,background
和bgcolor
属性分别转换为body
元素的background-image
和background-color
声明。body
元素指定画布背景而不是html
元素,以便从具有表示性属性的body
元素迁移到CSS的遗留HTML文档。通常,如果您控制标记和CSS,则可能想要做的第一件事情是摆脱表示性属性。但是,您不需要立即这样做;您只需添加特定于body
元素的background
声明,它将无缝替换整个页面背景(如问题中的规范链接所述)由表示性属性指定,无需进一步操作:
/* 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?
我的答案会更快,因为BoltClock的回答和规范都详细解释了。
这是一个效率问题。
如果你考虑到UA应该“[使用]BODY元素背景属性的值作为它们的初始值”,将这些值分配给body标签就有意义了。 如果你使用html标签,UA可能会使用一种回退来显示它,这是耗时的。 当然,对于现在的计算机来说,这没什么,但是对于移动设备呢?比如显示一个带有覆盖背景大小的背景图像?
此外,html标签的顺序是一个逻辑顺序,链接标签在头部定义,以便用于身体和他的后代。但是,如果你对html标签应用css规则,UA可能会向后...然后向前。
那么指定画布背景为BODY元素有什么优势呢?对于你来说几乎没有什么,但对于用户来说可以节省一些微秒,对于客户端和服务器来说可以节省一些微瓦,但小溪汇成江河。
W3C可能决定做相反的事情,这也可以,这只是标准的目的,让浏览器按照你的期望工作。
什么?iOS不遵守规则吗?(他们可以,他们是苹果)。不要改变正确的做法,使用媒体查询。实际上这是个偏好问题,这就是为什么它被推荐而不是被强制作为严格规则。
body
标签作为html
标签的后代会覆盖html
属性,除非是background
属性。
然而,由于所有浏览器默认给body
标签加上边距,创建了一个在body
和浏览器窗口之间的边框(尽管我们习惯将此边距重置为0),我猜这个...边框应该是可见的,因此在HTML上使用背景会使这个边框对用户不可见。鉴于这一事实,并且所有内容都包含在body
标签内,因此规范提供了这个建议。
然而,现在几乎每个人都将body
标签重置为0,因此在html
或body
标签上使用它没有区别,每种情况都与另一种情况相比没有优势。