5 ms·

No, this is one of those bizarre “wait, really, they put that in the default stylesheet” problems. There is a lot of weirdness lurking in the default user agen

No, this is one of those bizarre “wait, really, they put that in the default stylesheet” problems. There is a lot of weirdness lurking in the default user agent stylesheet…especially in Safari: https://blog.jim-nielsen.com/2021/things-i-learned-reading-webkits-ua-stylesheet/ https://blog.jim-nielsen.com/2021/things-i-learned-reading-w... Browser vendors put a lot of surprising, and very poorly documented, defaults into user agent stylesheets, and they can trip you up at the most basic level, and the styling is poorly exposed in most web inspector tooling. I ran into a nasty one with Safari’s date picker—had to go down a lot of rabbit holes to figure out I needed to finesse the `::-webkit-date-and-time-value` CSS to get an input field styled correctly.

dartos 2y ago
I don’t think those 2 problems are mutually exclusive.
knallfrosch 2y ago
I've found that the "Computed Styles" section catches most weirdness quite easily. Remove your own styles, view Computed and you'll see "User agent style sheet" as the source.
- MrJohz 2y ago
  Even if you don't look at the computed styles, the user agent styles are shown in the default element style view, at least in Firefox. There, you can see all of the applied styles as a stack, so you can see which styles have been applied first, which ones have been overridden, etc. This is a good place to look if you're trying to figure out why an element is behaving weirdly, because it shows all the styles and exactly how they override each other, as well as the source of each style.
paczki 2y ago
Something I discovered while changing the thumb track of a range slider just the other day, is if you add padding-top to the thumb, it will also add padding to the bottom. Even better, you have to set its appearance to none for chromium before you're able to style it in any capacity, which probably makes sense to somebody but not to me.

dartos 2y ago

I don’t think those 2 problems are mutually exclusive.

knallfrosch 2y ago

I've found that the "Computed Styles" section catches most weirdness quite easily. Remove your own styles, view Computed and you'll see "User agent style sheet" as the source.

MrJohz 2y ago
Even if you don't look at the computed styles, the user agent styles are shown in the default element style view, at least in Firefox. There, you can see all of the applied styles as a stack, so you can see which styles have been applied first, which ones have been overridden, etc. This is a good place to look if you're trying to figure out why an element is behaving weirdly, because it shows all the styles and exactly how they override each other, as well as the source of each style.

paczki 2y ago

Something I discovered while changing the thumb track of a range slider just the other day, is if you add padding-top to the thumb, it will also add padding to the bottom. Even better, you have to set its appearance to none for chromium before you're able to style it in any capacity, which probably makes sense to somebody but not to me.