Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Add a default background and color on :root?
See original GitHub issueSo I wanted to suggest this because as it turns out, some browsers don’t set the body’s background to #FFFFFF or its colour to #000000 by default, this can happen on some browser themes or if the user set their own colours.
And this breaks many many websites, but many people who use settings and themes like that blame it on the devs of the website.
Since not a lot of devs are aware of this and yet most people would want to have a reliable background and text colour, maybe it would be a good idea to add
:root {
background: #FFF;
color: #000;
}
Since :root has the lowest CSS priority, it should not break anything, most people apply the background on html or body anyway.
I don’t wanna debate on if those people are right or wrong to change their default background and text colour, there is also no actual HTML or CSS standards saying browsers should set the background to a certain colour as far as I’m aware, so it’s not like they’re 100% wrong.
I am not sure if this is in the minimalistic scope of your project, I do feel like it is because it is a very elemental reset that you could argue would help many websites out there. And that, if more people were aware of this, everyone would start their project by resetting the background and text colour.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:17
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@Pizzacus I decided to test it this way because I tried to use it on a login modal I was working on, and the login modal did not take up the whole screen obviously, then the background started acting weird.
To respond to your comment, this is what I mean by avoiding to take a position with minireset. By keeping clear of more aggressive defaults, this stylesheet can remain “mini” and “inclusive”.
However, I appreciate your dedicated efforts to get this right.
Ah, I see, the reason why that is is probably that the
:rootelement takes the background of<body>if no other background is set.So my next question was “is this a standardised thing”, and the answer is yes.
https://drafts.csswg.org/css-backgrounds-3/#body-background
There is, unfortunately, no way to replicate this behaviour in CSS while setting default values… If we set a default on
bodythen there will be problems if someone tries to set it onhtml, if we set it onhtmlthen there may be some problems with setting it onbodyThis has nothing to do with the use of pseudo-elements,
:rootis just the same as writinghtml.But the real question is is this acceptable? I’m really not sure, I do think that setting a default on
:rootorhtmlis the best, it’s still less likely to break stuff, even if you found an instance where it does, since normally, thebodyelement will take the whole screen, so it doesn’t matter what colour the:rootis any more.But yeah, perhaps the best solution would be to petition W3C to make white the standard background xD different colours always break websites and yet browsers still use them because… reasons!