Can we modify user agent default styling?
Hello, I wanted to create a horizontal line (see the picture... it's not that visible though sorry :c).
I wanted to set an outer container wrapping both the wordings
My Profile , then use display flex thinking that when I will use the hr element, the line will be just beside My Profile and it will be like in the picture. But I didn't get this effect at all :c.
The line when used being a child of a flex container seems to have "disappear" but it's still present in the DOM. I tried to change its color but no change.
I think we can reset user-agent styles (I think this is what we call css reset?)... but the thing is I don't know if it's worth doing that here. When I have a "separator" to insert, like in the diagram , is it best to create it using things like border-bottom (we can't use outline, right? Outline don't have outline-right, outline-left etc...) instead of using hr?
10 Replies
User agent styles are the default the browser uses. It’s called that because browsers are the user agent.
So you can modify your UA style sheet, but not others. That’s why we write external style sheets
how does that differs from a css reset pls
CSS resets are external style sheets where you remove the default user agent style sheet
ah like when I remove default margin on
body, this is kind of a css reset?And were popular about a decade ago when different browsers had vastly different UA sheets. And people thought that the differences would cause people to not visit their site. Thinking that most people use 5 different browsers or something
No. CSS resets were to create a near-identical steering style. It was a ham-handed way to ensure pixel-perfect duplication between browsers.
yeah I see, it's no longer use nowadays?
They’re still used in legacy systems but for the most part aren’t needed today
ok noted, ty !
If you want, have a look at Jen Simmons’ CSS Remedy for a more sane way to do things.
It gives you not only the changes but the why. It’s not about pixel-perfection, but rather sane and logical adjustments.
For example, making images be block elements with a max-width. Setting border-box for element box sizing. Heck, using
rem for heading sizes so they don’t accidentally compound.
It hasn’t been touched in a number of years, but I honestly don’t think there’s been any additions to CSS since that would require correction. A lot of how old defaults arose is due to backwards compatibility. They can’t change the current defaults or else many websites will break. But they aren’t more aware of that now and spend a lot more time when adding things to the web so those weird and non-expected cases don’t pop up as often.will have a look, thanks !