The above can be defined as the CSS :root pseudo-class. This is a general selector for selecting the root element of a HTML/XML document, this isn't the
Probably the most confusing thing is :root in HTML. In HTML, the root element is
html, but some of the properties of
body must also be applied to the root element. This was done (I believe) for backwards compatibility mode (
<body bgcolor="#000000">). This makes things extremely complicated, since in XHTML you should not apply your page background-color to the
body element (In HTML, you are encouraged to apply it to the root element, far better IMHO). In XHTML, this can give problems. Jacques Distler and I have discussed this in the comments on <html id=""> and I found answers in comment 8. It appears that the most important bug of the two has been fixed. FYI: don't rely on my workaround in comment 10. It breaks several browsers, including Safari.
Besides the background properties you could also get problems with the overflow property. Lot's of stupid designers want to hide the scrollbars and apply
overflow:hidden; to the
body type selector. Due a bug in Mozilla: 170011, whole pages become invisible.
Since we currently live in an era where some stupid browser has power, we need to be careful with what we apply. For example: IE doesn't apply background-image (and related) to the
html type selector. You can apply all the other styles to that type selector AFAIK.
Some quotes (we need @viewport or something similar, could also be useful to style scrollbars):
HTML UAs may apply the overflow property from the
HTMLelements to the viewport.
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
For HTML documents, however, we recommend that authors specify the background for the
BODYelement rather than the
HTMLelement. User agents should observe the following precedence rules to fill in the background of the canvas of HTML documents: if the value of the 'background' property for the
HTMLelement is different from 'transparent' then use it, else use the value of the 'background' property for the
BODYelement. If the resulting value is 'transparent', the rendering is undefined. This does not apply to XHTML documents.
Why would the CSS2.1 specification recommend such thing?
Just for clarity: Both the bugs referred to in comment 8 of the older post have been resolved (one fixed, one not a bug) and it's unclear whether bug 170011 is really a bug or not; the bug report is open awating CSS WG clarifcation on the issue.
It seems a logical resolution that if the HTML document does not have background colour defined via the
<html> element then it will use the value defined via CSS for the
<body> element, assuming there is one.
Perhaps, but it isn't logical that they recommend setting it on the
<body> element. But that is just my opinion. Besides, if it was correctly supported (in Internet Explorer for example) I could have made sites without
Just styling the
It is logical, because they know that styling
html breaks some older browsers, whereas some person reading the spec (in principle) might not know that. Therefore recommending the slghtly-less-pure-but-universially-supported method allows the spec to be useful to real people, rather than just being a source of markup ideology
Stupid browsers, stupid designers... We are doomed.