molly.com
Friday 18 February 2005
root element: html
CONFUSED ABOUT ROOT? Apparently, so are people trying to interpret the W3C CSS 2.1 specification as it relates to the root element and containing blocks. Let’s help clarify the concern.
The root element in HTML and XHTML is always the html element. This is because it is the element that has no ancestors, only descendants.
What seems to be confusing the issue is this language from the CSS 2.1 spec:
The containing block in which the root element lives is chosen by the user agent. (It could be related to the viewport.) This containing block is called the initial containing block.
That it “could be related to the viewport” is the language I think is confusing and very vague on the part of the W3C. However, the fact remains that the root element is still html. To support that, here’s the W3C’s definition of the document tree and root element:
Document tree: The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none.
The viewport is not an element, but I suppose if one sees it as the “containing block in which the root element lives” a browser developer could conceivably interpret that to mean the viewport rather than the root element.
But to my way of thinking, if there is no other defined containing block, the root element must be html and not the viewport, because it is the root of the document.
Darned confusing, and in this case I blame the W3C terminology. I’d love to hear more thoughts and opinions on this.
Filed under: standards
Posted by: Molly | 11:52 am |
February 18th, 2005 at 12:34 pm
I think the confusion arises around the term, “containing block” rather than the “related to the viewport” section. I didn’t think it was ambiguous until you pointed it out, which either goes to show how ambiguous language can be, or that I only think I understand what they mean.
If I understand it correctly, the containing block in this instance doesn’t relate to the document tree, other than where the root element of the document tree will be placed. It’s quite reasonable for the containing block for the document tree to be decided by the user agent, so that user agents can support split views, or other types of customisation, which would be placed relative to the viewport. The reason I think containing block is the confusing term, is that it’s also used to refer to elements in the document tree that act as containing blocks for other elements.
February 18th, 2005 at 12:47 pm
Interesting issue, Molly. I think this language confuses the two technologies a bit. For one thing, an XHTML (or any XML) element is not a containing “block” by its own nature, but is given one by default when displayed in CSS. When the spec says that the root element lives within a containing block, it seems to suggest that there is something going on above the root element, that somehow the XHTML hierarchy is being affected. When, all it is really saying is that CSS defines some sort of initial, visual containing block when applied to XHTML.
February 18th, 2005 at 2:05 pm
My quandary involves the use of the phrase “containing block”. As it stands, it almost connotes to the reader that the <html> element also adheres to the box model and can have, as such, margins, padding, etc. specific to it in addition to what may be applied to the <body> element. Maybe it’s just me (again, as Gez, the choice of wording is ambiguous), but it does seem odd that this should be introduced in the CSS 2.1 specifications instead of the HTML or XHTML specifications (time for me to go check and see what IS in those specifications).
February 18th, 2005 at 2:23 pm
Wow… I just realized that what I thought was “connoted” is actually “fact” in Firefox. I just tried a page where I applied margins and a background-color to the <html> element and it did it. However, as usual, IE does not handle it quite the same. They assume, like I did, that the box model does not apply to the <html> element; thus, the margins were not implemented. However, if the content of the <body> does not span the entire height of the <html> element’s containing block, then where it ends, the background-color applied to the <html> element shows. My example is shown here. Probably off-topic, but I never cease to learn stuff.
February 18th, 2005 at 2:32 pm
When reading the whole passage about the definition of containing block it becomes clear that the initial containing block has no relation to the document tree.
I understand this initial containing block being equivalent to the canvas in visual user agents, where the canvas is restricted by the dimensions of the viewport.
February 18th, 2005 at 3:35 pm
Outside the HTML element there is an initial containing block element. It is not specified by CSS 2.1 what exactly that element represents because that is outside the scope of the specification.
February 18th, 2005 at 5:33 pm
I have no idea what the confusion is all about. The viewport is the window in which all content is rendered and, in CSS terms, is the containing block for the root element. This initial containing block is not an element, it is simply a box within the CSS box model (although a ::viewport, or similar, pseudo-element may be defined in the future to refer to it). In (X)HTML, as you said, the root element is html which gets rendered within the viewport, so I don’t see what is at all confusing about the two different concepts.
February 18th, 2005 at 8:53 pm
Thanks for some feedback, I need to reread this & CSS2.1 again.
This seems to be an interesting phrase in section 10.1 and if you look at the table after NOTHING relates to BODY or HTML!!!
If we position “div1″:
#div1 { position: absolute; left: 50px; top: 50px }
its containing block is no longer “body”; it becomes the initial containing block (since there are no other positioned ancestor boxes).
Canvas is infinite, viewport only vagely connects to it. The way some browsers seem to work the CB seems to be the end of my cat’s tail!
Charles: you may like to look at the following test I was trying. Look at it in modern Opera, Navigator and IE 5 AND 6 - talk about consistency - NOT. Try putting in height:100%; into html then body and watch what happens!
Test
February 20th, 2005 at 12:43 am
Thanks, G Evans. I did actually start playing around with things and sent an email to Molly for her input on some items I came across. Hopefully she’ll respond to my email soon and give me her opinion(s).
February 20th, 2005 at 2:31 pm
Charles,
I’m in a perpetual state of email backlog so please by all means post your items here - I’m sure we can all learn from your input!
-M
February 20th, 2005 at 4:36 pm
Based on your request, here is the email in its entirety (minus sig):
February 20th, 2005 at 10:05 pm
funny enough, if you wanted to style everything on the page, you would use the star (*) in your css rather than the html element.
February 21st, 2005 at 12:28 am
There is a lot of confusion about the use of the terms “block” and “inline” in the (X)HTML and CSS specifications. CSS doesn’t worry about block-level or inline-level elements at all; it deals with block-level and inline-level boxes. There is a default box type for each rendered element type, but that is defined in the user agent style sheet, not in the CSS specification.
February 21st, 2005 at 3:20 am
Charles,
I would like to draw your attention to the user mode stylesheets in Opera. There you find a stylesheet named Showstructure.css which does actually style elements inside the
headsection to display the available information.Alas, as you noticed, Internet Explorer does not support any styling of these elements. How other user agents despite Opera and Firefox handle this I, regretfully, do not know.
March 2nd, 2005 at 8:29 am
If something has to be explained this much, then it is wrongly conceived. That’s the Zen of it.
March 3rd, 2005 at 5:03 am
To confuse the viewport as the root, is to not know what ‘viewport’ means (its definition). I agree, the root should always be the HTML in such cases.
p.s. Molly, your comments form URL textbox doesn’t declare if the ‘http://’ is required or not for the text field, and the lowercase ‘L’ in the label looks like an ‘I’….(’URI’ rather than ‘URL’). Just saying.
January 1st, 2006 at 1:51 pm
[…] Root element: html […]
May 23rd, 2006 at 1:21 pm
Very Very nice information here… Thanks
June 2nd, 2006 at 8:23 am
Poniéndome al Día
La vuelta de vacaciones ha sido un clavado al teclado y casi sin tiempo para tomar aire, así que mientras me robo un tiempo para actualizarme en mis 140 suscripciones en Bloglines comparto con ustedes algunos vínculos que han capturado mi atención:
…
October 9th, 2006 at 11:11 pm
Thanks for shedding light on the ‘root’ of the problem hehe.
March 30th, 2008 at 6:02 am
thanks
April 22nd, 2008 at 8:13 pm
Nice job.
April 30th, 2008 at 10:36 am
thanks
July 24th, 2008 at 11:31 am
good sitee
July 24th, 2008 at 12:12 pm
good blogger
July 24th, 2008 at 12:39 pm
thanks web site
July 24th, 2008 at 3:43 pm
very nice