According to the spec:
根据规格:
It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素。
But it doesn't say what advantages it has. Why does the spec recommend this?
但它并没有说它有什么优势。为什么规范推荐这个?
P.S. It crossed my mind when I saw Extra scrollbar when body height is 100vh: isn't it better to simply give the background to the html element instead?
附:当我看到额外的滚动条时身体高度是100vh时,我突然想到了:简单地将背景赋予html元素不是更好吗?
3 个解决方案
#1
13
Prior to CSS, backgrounds were specified by adding the background and bgcolor attributes to the body element in HTML (along with the likes of text, link, alink, vlink, leftmargin, marginwidth, topmargin and marginheight).
在CSS之前,通过将背景和bgcolor属性添加到HTML中的body元素(以及text,link,alink,vlink,leftmargin,marginwidth,topmargin和marginheight等)来指定背景。
CSS-compliant browsers convert these presentational attributes into the appropriate style rules, placed as author-level presentational hints with just less precedence than author-level * rules. More on this in css-cascade-3 and HTML. Namely, the background and bgcolor attributes are converted to background-image and background-color declarations respectively, for the body element.
符合CSS的浏览器将这些表示属性转换为适当的样式规则,作为作者级表示提示放置,其优先级低于作者级*规则。有关css-cascade-3和HTML的更多信息。即,背景和bgcolor属性分别转换为body元素的background-image和background-color声明。
So, the recommendation that authors specify the canvas background for the body element and not the html element was made to ease migration of legacy HTML documents from presentational attributes on the body element to CSS. Normally if you have control of both the markup and CSS the first thing you'd probably want to do is get rid of the presentational attributes. But you don't have to do so right off the bat; you can just add a background declaration specific to the body element, and it will seamlessly replace the entire page background (as described in the spec link in the question) as specified by the presentational attributes, with no further action necessary:
因此,建议作者指定body元素的画布背景而不是html元素,以便于将遗留HTML文档从body元素的表示属性迁移到CSS。通常,如果您同时控制了标记和CSS,那么您可能想要做的第一件事就是摆脱表示属性。但你不必立即这样做;您可以只添加一个特定于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's yellow!If you add it to the html element instead, you'll end up with two backgrounds:
如果你把它添加到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?If you're aware of the body element having a bgcolor attribute, this does have the advantage of serving as a visual reminder to you to get rid of the attribute. But if that doesn't occur to you right away, you'll probably be left flummoxed.
如果您知道body元素具有bgcolor属性,那么它的优势在于可以作为视觉提醒来摆脱属性。但是,如果你不立即发生这种情况,你可能会感到沮丧。
Of course, if you're authoring new documents then this simply becomes a matter of tradition (which ties in to the whole "ease of migration" thing). There's nothing stopping you from applying backgrounds to both html and body for interesting effects, though even that has largely been superseded by the ability to add multiple background layers to one element and is only really necessary if you need to support older browsers. More on this in the link above.
当然,如果你正在创作新文件,那么这只是一个传统问题(它与整个“易迁移”事物联系在一起)。没有什么可以阻止你将html和body的背景应用于有趣的效果,尽管这已经被很大程度上取代了向一个元素添加多个背景图层的能力,并且只有在你需要支持旧浏览器时才真正需要。在上面的链接中有更多相关信息。
#2
0
It is a matter of preference actually, this is why it is recommended rather than being forced as a strict rule.
实际上这是一个偏好的问题,这就是为什么建议而不是强制作为严格规则。
The body tag being a descendant of the html tag overrides the html properties - being background otherwise.
作为html标记的后代的body标记会覆盖html属性 - 否则为背景。
However, since all browsers give a margin to body by default, creating a border between the body and the browser window (although we are used to resetting this margin to 0), I guess this ...border was meant to be visible, so using a background on the HTML would make this border invisible to users. Given this fact and since all content is contained inside the body tag, the recommendation was provided by spec.
但是,由于默认情况下所有浏览器都为主体提供边距,因此在主体和浏览器窗口之间创建边框(虽然我们习惯将此边距重置为0),我想这...边框本来是可见的,所以在HTML上使用背景会使用户无法看到此边框。鉴于此事实并且由于所有内容都包含在body标签内,因此建议由spec提供。
However, nowadays the body tag is usually reset to 0 by almost everyone so using it on either html or body tag makes no difference and each case provides no advantages compared to the other.
然而,现在身体标签通常被几乎所有人重置为0,因此在html或body标签上使用它没有任何区别,并且每种情况与其他情况相比没有任何优势。
#3
0
My answer will be quicker, because BoltClock's one and the spec explain it minutely.
我的答案会更快,因为BoltClock的一个和规范解释得很清楚。
It is a matter of efficiency.
这是一个效率问题。
If you think about the fact that the UA should "[use the] values of that BODY element's background properties are their initial values", it makes sense to assign these values to the body tag. If you use the html tag, UA may use a kind of fallback to display it, which is time consuming. Of course, it's nothing for nowadays computers, but what about mobile devices, displaying let's said a background image with a cover background-size?
如果您认为UA应该“[使用]该BODY元素的背景属性的值是它们的初始值”,那么将这些值分配给body标签是有意义的。如果你使用html标签,UA可能会使用一种后备来显示它,这很费时间。当然,它对于现在的计算机来说什么都没有,但是移动设备呢,显示让我们说背景图片的背景图片?
Furthermore, the order of html tags is a logical one, the link tags are defined in the head, in order to be used for the body and his childrens that come after. But if you apply a css rule to the html tag, the UA may go backward... And then forward.
此外,html标签的顺序是合乎逻辑的,链接标签在头部定义,以便用于身体和他的孩子之后。但是如果你将css规则应用于html标签,那么UA可能会倒退......然后转发。
So what are the advantages of specifying the canvas background for the BODY element? Quite nothing, for you, but some microseconds for the user, some microwatts for the client and the servers, but small streams make big rivers.
那么为BODY元素指定画布背景有什么好处呢?没什么,对你来说,但对于用户来说只有几微秒,对于客户端和服务器来说只有一些微瓦,但是小流量会让大河流变大。
The w3c may have decided to do the opposite, it will have been ok too, it's just the purpose of a standard, that you make what a browser expects of you.
w3c可能已经决定采取相反的做法,它也一直没问题,这只是标准的目的,你做出了浏览器对你的期望。
What? iOS does not respect the rules? (they can, they are apple). Don't change the correct way to do that, use media queries.
什么? iOS不尊重规则? (他们可以,他们是苹果)。请勿更改正确的方法,使用媒体查询。
#1
13
Prior to CSS, backgrounds were specified by adding the background and bgcolor attributes to the body element in HTML (along with the likes of text, link, alink, vlink, leftmargin, marginwidth, topmargin and marginheight).
在CSS之前,通过将背景和bgcolor属性添加到HTML中的body元素(以及text,link,alink,vlink,leftmargin,marginwidth,topmargin和marginheight等)来指定背景。
CSS-compliant browsers convert these presentational attributes into the appropriate style rules, placed as author-level presentational hints with just less precedence than author-level * rules. More on this in css-cascade-3 and HTML. Namely, the background and bgcolor attributes are converted to background-image and background-color declarations respectively, for the body element.
符合CSS的浏览器将这些表示属性转换为适当的样式规则,作为作者级表示提示放置,其优先级低于作者级*规则。有关css-cascade-3和HTML的更多信息。即,背景和bgcolor属性分别转换为body元素的background-image和background-color声明。
So, the recommendation that authors specify the canvas background for the body element and not the html element was made to ease migration of legacy HTML documents from presentational attributes on the body element to CSS. Normally if you have control of both the markup and CSS the first thing you'd probably want to do is get rid of the presentational attributes. But you don't have to do so right off the bat; you can just add a background declaration specific to the body element, and it will seamlessly replace the entire page background (as described in the spec link in the question) as specified by the presentational attributes, with no further action necessary:
因此,建议作者指定body元素的画布背景而不是html元素,以便于将遗留HTML文档从body元素的表示属性迁移到CSS。通常,如果您同时控制了标记和CSS,那么您可能想要做的第一件事就是摆脱表示属性。但你不必立即这样做;您可以只添加一个特定于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's yellow!If you add it to the html element instead, you'll end up with two backgrounds:
如果你把它添加到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?If you're aware of the body element having a bgcolor attribute, this does have the advantage of serving as a visual reminder to you to get rid of the attribute. But if that doesn't occur to you right away, you'll probably be left flummoxed.
如果您知道body元素具有bgcolor属性,那么它的优势在于可以作为视觉提醒来摆脱属性。但是,如果你不立即发生这种情况,你可能会感到沮丧。
Of course, if you're authoring new documents then this simply becomes a matter of tradition (which ties in to the whole "ease of migration" thing). There's nothing stopping you from applying backgrounds to both html and body for interesting effects, though even that has largely been superseded by the ability to add multiple background layers to one element and is only really necessary if you need to support older browsers. More on this in the link above.
当然,如果你正在创作新文件,那么这只是一个传统问题(它与整个“易迁移”事物联系在一起)。没有什么可以阻止你将html和body的背景应用于有趣的效果,尽管这已经被很大程度上取代了向一个元素添加多个背景图层的能力,并且只有在你需要支持旧浏览器时才真正需要。在上面的链接中有更多相关信息。
#2
0
It is a matter of preference actually, this is why it is recommended rather than being forced as a strict rule.
实际上这是一个偏好的问题,这就是为什么建议而不是强制作为严格规则。
The body tag being a descendant of the html tag overrides the html properties - being background otherwise.
作为html标记的后代的body标记会覆盖html属性 - 否则为背景。
However, since all browsers give a margin to body by default, creating a border between the body and the browser window (although we are used to resetting this margin to 0), I guess this ...border was meant to be visible, so using a background on the HTML would make this border invisible to users. Given this fact and since all content is contained inside the body tag, the recommendation was provided by spec.
但是,由于默认情况下所有浏览器都为主体提供边距,因此在主体和浏览器窗口之间创建边框(虽然我们习惯将此边距重置为0),我想这...边框本来是可见的,所以在HTML上使用背景会使用户无法看到此边框。鉴于此事实并且由于所有内容都包含在body标签内,因此建议由spec提供。
However, nowadays the body tag is usually reset to 0 by almost everyone so using it on either html or body tag makes no difference and each case provides no advantages compared to the other.
然而,现在身体标签通常被几乎所有人重置为0,因此在html或body标签上使用它没有任何区别,并且每种情况与其他情况相比没有任何优势。
#3
0
My answer will be quicker, because BoltClock's one and the spec explain it minutely.
我的答案会更快,因为BoltClock的一个和规范解释得很清楚。
It is a matter of efficiency.
这是一个效率问题。
If you think about the fact that the UA should "[use the] values of that BODY element's background properties are their initial values", it makes sense to assign these values to the body tag. If you use the html tag, UA may use a kind of fallback to display it, which is time consuming. Of course, it's nothing for nowadays computers, but what about mobile devices, displaying let's said a background image with a cover background-size?
如果您认为UA应该“[使用]该BODY元素的背景属性的值是它们的初始值”,那么将这些值分配给body标签是有意义的。如果你使用html标签,UA可能会使用一种后备来显示它,这很费时间。当然,它对于现在的计算机来说什么都没有,但是移动设备呢,显示让我们说背景图片的背景图片?
Furthermore, the order of html tags is a logical one, the link tags are defined in the head, in order to be used for the body and his childrens that come after. But if you apply a css rule to the html tag, the UA may go backward... And then forward.
此外,html标签的顺序是合乎逻辑的,链接标签在头部定义,以便用于身体和他的孩子之后。但是如果你将css规则应用于html标签,那么UA可能会倒退......然后转发。
So what are the advantages of specifying the canvas background for the BODY element? Quite nothing, for you, but some microseconds for the user, some microwatts for the client and the servers, but small streams make big rivers.
那么为BODY元素指定画布背景有什么好处呢?没什么,对你来说,但对于用户来说只有几微秒,对于客户端和服务器来说只有一些微瓦,但是小流量会让大河流变大。
The w3c may have decided to do the opposite, it will have been ok too, it's just the purpose of a standard, that you make what a browser expects of you.
w3c可能已经决定采取相反的做法,它也一直没问题,这只是标准的目的,你做出了浏览器对你的期望。
What? iOS does not respect the rules? (they can, they are apple). Don't change the correct way to do that, use media queries.
什么? iOS不尊重规则? (他们可以,他们是苹果)。请勿更改正确的方法,使用媒体查询。