A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

What is the default spec’d style for the <html> element?

trusktr
2020-05-01

Google search isn’t helping much.

I’m wondering, is there a default spec’d style that root <html> and <body> elements should have? Or is it up to browsers to choose what style they want?

As an exercise, I’d like to use this information in making my own CSS reset (like Eric Meyer’s), but I wanted to base my decisions on specs (if any) rather than specific browser styles.

In practice, a robust reset would be better, but I want to determine what a reset would look like assuming browsers all followed certain standards.

But perhaps if there is a lack of standards, then a robust reset would be required in order to make things consistent.

trusktr
2020-05-01

Alright, so I just played around with Chrome and Firefox, and they definitely have discrepancies at the root level, and seem not to follow a common standard.

This is my simple foo.html file:

<style>
    html { background-color: rgba(255, 0, 0, 0.5); }
    body { background-color: rgba(0, 255, 0, 0.5); }
    div { background-color: rgba(0, 0, 255, 0.5); }
</style>
<div>hello</div>

This is the output in Chrome:

And the output in Firefox:

Not only do the layouts differ, but the colors differ! Both engines apply margin: 8px; display: block to the <body> (keep this styling in mind for later, down below).

But that’s not all! There is a strange difference in how Firefox’s layout engine rules differ from Chrome’s with respect to <html> and <body>. Let me explain…

The following screenshots shows that <html> in Chrome takes up full size of the window (I am hovering on it in element inspector and it tints the whole page blueish, and shows the window size):

The following Chrome screenshot shows that <body> takes up full width/height of the <html> element:

Now in Firefox, the <html> element apparently does not take up the full window size, but rather it wraps the natural size of the body that contains the div:

Despite this, note that the entire window is colored with the red-ish color defined by the CSS, which is strange; the background leaks out of the <html> element.

Now the following screenshot shows that the <body> element wraps the <div>, unlike Chrome (thus the root elements seem to have differing default styles), and hence it makes sense that we don’t clearly see the <body>'s green color in Firefox (unlike the <html> element’s leaky background):


TLDR: The browsers clearly have differences.

Even as an experienced web developer, this is totally confusing.

Can’t we fix this? Is there not a spec that browsers should follow here?

emilio
2020-05-02

You’re testing on quirks mode, they should totally agree if you add <!doctype html> to your document :slight_smile:

emilio
2020-05-02

In particular, Chrome / WebKit has a quirk to make the body fill the viewport in quirks mode, that Firefox doesn’t. That’s tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1259924, but honestly I’m not very excited of adding new quirks to the platform.

simevidas
2020-05-08

Suggested default styles are defined in the rendering section of the HTML Standard:

https://html.spec.whatwg.org/multipage/rendering.html#rendering

html, body { display: block; }

This seems to be all.

trusktr
2020-05-09

Huh, it says

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions…

Seems like standardizing default would have been better.