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 body
element!
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
BODY
orHTML
elements 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
BODY
element rather than theHTML
element. 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 theHTML
element is different from 'transparent' then use it, else use the value of the 'background' property for theBODY
element. 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 div
elements!
Just styling the body
...
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.