DEV Community

loading...
Cover image for What is the color of a blank page?

What is the color of a blank page?

Bastien Calou on May 22, 2020

Please picture the following HTML page in your head: <html> <body> <h1>Hello World</h1> </body> </html&g...
pic
Editor guide
Collapse
sabberworm profile image
Raphael Schweikert • Edited

I remember in the ’90s when most browsers’ background color was grey. IE was the only one that has a white browser background by default. Others followed suit.

In fact you can change the browser background color in Firefox in about:config by setting browser.display.background_color. I have set this to grey to check if I haven’t accidentally forgotten to add background:white to a page that should have a white background.

I remember when they wanted to fix the weird special-casing of the body tag (which is NOT the root element but can upwards-„inherit“ its color to the html element, which is root) in XHTML. Still today, pages sent with the correct XHTML mime type (application/xhtml+xml) will not show this behaviour. Setting a background on the body tag there won’t make it magically stretch to the canvas.
Sadly, true XHTML never saw any real adoption…

Collapse
bcalou profile image
Bastien Calou Author

That is super-interesting, thank you so much for this comment.
Would you be ok with me writing a small bonus article and quoting your comment ?
I think more people need to know about this grey background tip.
Very interesting details about xhtml too, thanks!

Collapse
sabberworm profile image
Raphael Schweikert

Sure, by all means, bonus away…

Thread Thread
rubengmurray profile image
Reece Daniels

xhtml... wow, haven't seen a mention of that in a while

Collapse
rhymes profile image
rhymes

Netscape definitely had a grey "blank page":

netscape navigator

Collapse
bcalou profile image
Bastien Calou Author

Indeed, I'm currently writing about this! (not the main subject, but part of it)

Collapse
manishfoodtechs profile image
manish srivastava

It's a small Hello World after all..... nice article

Collapse
peke314 profile image
Victor Janin

Great Article!
so if we leave our html/body without any background, and the browser changes to dark mode, would that change the browser background?

Collapse
bcalou profile image
Bastien Calou Author

Thanks!
The answer seems compicated.
I just tried the #enable-force-dark flag to force dark mode on every site on Chrome.
It looks like it doesn't try to replace black background with white : it considers white to be black ! (see screenshot)
So background-color: white | transparent | black | none has the same effect : you see black. I think that yes, the browser's background changes, but that's really a wild guess.
Maybe something to explore in another article ;)

Collapse
bcalou profile image
Collapse
taylorbeeston profile image
Taylor Beeston

This was a really well-written article! I think we should petition Google and Mozilla to let us customize our default browser backgrounds. I personally would love it to actually be transparent and show me my desktop through the browser window

Collapse
bcalou profile image
Bastien Calou Author

I learned that this is possible in Electron by setting the background color of the body to "transparent" !
But nothing like that in the browser indeed

Collapse
victormagarlamov profile image
Victor Magarlamov

Thank you! It's a very interesting article!

Collapse
mckenney17 profile image
Ogunrinola Kehinde

You're a genius writer with your dev stuff, this made me wonder, are a member of the w3c or you sat down and figured this shit out yourself? You're great man. You've added greatly to my knowledge today

Collapse
bcalou profile image
Bastien Calou Author

Thank you very much, I'm so glad you liked it!
I'm just a front-end teacher ;) One of my student struggled with this mix-blend-mode thing, so I sat down and tried to get to the bottom of this with many tests. Had to read a lot of w3c documentation ^^
Actually I started writing another post on the same subject, because there is too much to say!

Collapse
simevidas profile image
Šime Vidas

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas.

Human translation: you put a background on the body. The browser will use that as a background for the canvas.

Small correction: The “root element” is the <html> element, not the <body> element.

Collapse
bcalou profile image
Bastien Calou Author • Edited

Small shortcut, I agree. The <html> is of course the root, but the browser uses the <body> rules as if they were set on the <html>.

"The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element."

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Iframe has allowtransparency -- stackoverflow.com/questions/374070... so I always know it is transparent.

Collapse
bcalou profile image
Bastien Calou Author

Thanks, I didn't know about that !
But I could not produce an example in which allowtransparency had any impact. The iframe is transparent by default.
Is it for specific browsers/environments ?

Collapse
nanouchkaya profile image
Claudine

Those wonderful thing we can learn about CSS 😍 thank you for sharing!

Collapse
alohci profile image
Nicholas Stimpson

Good stuff. Most of this I knew, but the point about the blend-modes had passed me by. Thanks for the explanation.

Collapse
leob profile image
leob

Man, this is deep! Good stuff.

Collapse
bayuangora profile image
Bayu Angora • Edited

Some website use <canvas> on its view-source, especially when it use particle.js background.

Collapse
rpalo profile image
Ryan Palo

These examples are really, really good.

Collapse
omarioabreu profile image
Mário Abreu

Interesting article! 👏

Collapse
rootdown001 profile image
Lance A.

I think this is a great article...solves a lot of mysteries

Collapse
hohonsing profile image
Ho Honsing

Great post and salute to your adventurous spirit!

Collapse
peacefulseeker profile image
Alexey Vorobyov

Brilliant presentation of such a tricky material!

Collapse
itachiuchiha profile image
Itachi Uchiha

Amazing!

Thanks for this great post.

Collapse
sbu_05 profile image
CoolCodekid

I had a good laugh at this 😄😂 . Thanks for that! Keep up the good stuff

Collapse
sergix profile image
Peyton McGinnis

Creative article! A common misconception many of us neglect. Well written!

Collapse
rhymes profile image
rhymes • Edited

This post is AMAZING! Thanks Bastien, I learned so much :-D

Human translation : there is something behind the canvas.

AHHAHAHA

Collapse
myleftshoe profile image
myleftshoe

Funny, all the way down to the bottom

Collapse
russellabraham profile image
Russell

Thanks. I suspect this has something to do with toggling a dom node into full screen or off screen without a bg color.