Please picture the following HTML page in your head:
<html>
<body>
<h1>Hello World</h1>
</body>
</html&g...
For further actions, you may consider blocking this person and/or reporting abuse
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:configby settingbrowser.display.background_color. I have set this to grey to check if I haven’t accidentally forgotten to addbackground:whiteto a page that should have a white background.I remember when they wanted to fix the weird special-casing of the
bodytag (which is NOT the root element but can upwards-„inherit“ its color to thehtmlelement, 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 thebodytag there won’t make it magically stretch to the canvas.Sadly, true XHTML never saw any real adoption…
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!
Sure, by all means, bonus away…
xhtml... wow, haven't seen a mention of that in a whileNetscape definitely had a grey "blank page":
Indeed, I'm currently writing about this! (not the main subject, but part of it)
It's a small Hello World after all..... nice article
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?
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 ;)
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
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
Thank you! It's a very interesting article!
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
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!
Small correction: The “root element” is the
<html>element, not the<body>element.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."
Iframe has
allowtransparency-- stackoverflow.com/questions/374070... so I always know it is transparent.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 ?
Those wonderful thing we can learn about CSS 😍 thank you for sharing!
Good stuff. Most of this I knew, but the point about the blend-modes had passed me by. Thanks for the explanation.
Man, this is deep! Good stuff.
Some website use
<canvas>on its view-source, especially when it use particle.js background.These examples are really, really good.
Interesting article! 👏
I think this is a great article...solves a lot of mysteries
Great post and salute to your adventurous spirit!
Brilliant presentation of such a tricky material!
Amazing!
Thanks for this great post.
I had a good laugh at this 😄😂 . Thanks for that! Keep up the good stuff
Creative article! A common misconception many of us neglect. Well written!
This post is AMAZING! Thanks Bastien, I learned so much :-D
AHHAHAHA
Funny, all the way down to the bottom
Thanks. I suspect this has something to do with toggling a dom node into full screen or off screen without a bg color.