Viewport and friends

On these pages I research the Viewport and its friends. It deals with the browser window itself and its relation to the HTML document inside it, both from a CSS and from a JavaScript point of view. It is very much under construction because my research has hardly started yet.

This subject is so esoteric that even I myself don't quite know what I'm searching for. I hope that it becomes clearer after I've added new experiments.

No standards

This area of web development hasn't been standardized at all; in fact W3C seems to back away from the viewport as an aberration in its orderly realm of structural (semantic!) data and device independence.

W3C's Level 2 DOM Views specification is laughable. Its Level 3 DOM Views and Formatting draft is not much better. None of the more or less cross-browser properties dealing with the viewport appear in it. Fortunately it is no longer part of the DOM specification.

The CSS 2.1 specification is clearer, but still has some holes in it.

1. A document consists of blocks within blocks, say, a div inside the body. Thus the body is the containing block of the div. So far so good.
2. Each document has a root element, but unfortunately the specification does not state which element this is, it only says that the root element does not have a parent block (which I could have guessed for myself). Is the root element the html element? For the moment I'm going to assume so.
3. This root element also has a containing block. Now it's getting interesting, but unfortunately the specification only says:
   "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."
   This may be a safe definition, but it hardly specifies what the initial containing block is, and that's exactly what I need to know.
   The initial containing block "could be related to" the viewport. I'd prefer a stricter specification. Now browsers have the choice to either regard the html element as the initial containing block, or inserting yet another block between it and the viewport.
   Vague, vague.

In my view, if W3C seriously wishes to standardize viewport and friends (which in itself wouldn't be a bad idea), it should

1. for the purpose of this specification only, relinquish the idea of device independence and make no bones about defining methods and properties for traditional visual browsers that work with (X)HTML. This would remove quite a few abstraction layers and make for a more workable specification.
2. include the JavaScript properties that already work (more or less) cross-browser.
3. pay attention to both the CSS and the DOM relations between viewport/window and HTML/documentElement, and specify how these two trees interact.

Browsers

So browsers have been left to themselves. In the past this would have been a sure recipe for disaster, but nodwadays browser vendors pay attention to each other's implementations, which makes the situation less bad than it could have been.

In the past there were a Netscape and a Microsoft system for reading out, say, the width and height of the browser window. These systems have largely survived, and the Microsoft one has been greatly extended. Mozilla, Opera and Safari now support both systems.

These systems are detailed on the Browser compatibility page.

Theory

I've construed the following theory about the relations between the HTML/CSS and the JavaScript trees. It is far from finished, but I want to have some sort of general overview, even if it's not quite on the mark. In W3C terms this would be a Working Draft.

HTML / CSS              JavaScript

viewport                window
   |                        |
   |                        |
   |                    document
   |                        |
   |                        |
HTML tag                document.documentElement
   |                        |
   |                        |
   |                        |
BODY tag                document.body
   |                        |
   |                        |
   |                        |
DIV tag                 document.[div element]

I'm pretty sure about the DIV, BODY and HTML layers, but the higher layers are vaguer.

I assume there is a relation between the HTML viewport and the JavaScript window object, but it's not as easy as you'd think. For instance, there are only a few window properties that actually say something about the viewport, and they're not cross browser.

For more serious information about the viewport we have to go to the document.body and document.documentElement objects, which are supposed to reflect another layer of the HTML/CSS document. This is for historical reasons only: Microsoft defined document.body.clientHeight as the height of the viewport, and all other browsers followed.

The JavaScript document object has no HTML/CSS counterpart at all.

As you see this is all still quite vague. I hope to significantly update my theory later on, but that'll have to wait until I know what I should test for.

Experiments

I have devised a few experiments to make the relations between these objects clearer. The real problem is finding out which experiments I should perform and what they prove (or don't prove).

You can find them at my experiments page.

I also added a page on element dimensions.