Father of four under four, three boys and one girl! Full-Stack dev programming mostly in Javascript/TypeScript these days, with a decent amount of Rust on the side
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
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 ;)
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…
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!
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 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."
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 ?
Web and app developer | JS, Typescript, React, Next.j | Improving user experience and healthcare through innovative technology solutions after career change from healthcare to my first passion, tech.
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
It's a small Hello World after all..... nice 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
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 ;)
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)
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."
Good stuff. Most of this I knew, but the point about the blend-modes had passed me by. Thanks for the explanation.
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!
I think this is a great article...solves a lot of mysteries
Some website use
<canvas>on its view-source, especially when it use particle.js background.Amazing!
Thanks for this great post.
Brilliant presentation of such a tricky material!
This post is AMAZING! Thanks Bastien, I learned so much :-D
AHHAHAHA
Great post and salute to your adventurous spirit!
Man, this is deep! Good stuff.
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!
These examples are really, really good.
Interesting article! 👏
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.