Here's the first of many smaller projects I plan to release this year:
A custom reset style sheet that comes with a website that allows you to compare it with the default user agent styles and other reset style sheets.
If you want me to include your or another reset style sheet, send me a link!
I forgot to give a shout-out to the many great people from whom I stole ideas: @belldotbz Elad Shechter @elly @Meyerweb Josh Comeau @keithjgrant @Kilian @mayank and Nicolas Gallagher
Following UA+, here's the next project.
CSS boilerplate: A default CSS structure for projects of any size.
It comes with a detailed explanation how I use cascade layers.
@matuzo
Good stuff, definitely some things I wouldn't have thought about. 👍
For <textarea>, what about using `lh` with `em` as a fallback? And maybe add `resize: both`? It's a UA default I appreciate in Safari.
@cwilcox808 lh is a great idea, thanks! I'll have to think about resize. Personally I'd say yes, but many dislike it. In some resets it actually gets removed.
@matuzo
I think of `resize` as another example of letting users choose what works best for them.
What's the source of dislike, do some users accidentally resize textareas when they don't want to?
@cwilcox808 I think the fact that you can "break a layout".
I just tested the default and most UAs seem to use resize: both as a default. where is it missing?
@cwilcox808 have you tested using `lh`? In my (limited) tests `em` seems to yield better results.
@matuzo
I haven't tested it, I just thought it would be a more natural unit for height, more in keeping with textarea's `rows` attribute.
@cwilcox808 yeah, makes sense. but 1lh doesn't seem to match 1 row.
Apr 4, 2025, 9:11 AM@matuzo Did you intentionally decide against box-sizing: inherit; ?
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
@ausi yes! 1. I don't believe it's a common problem. 2. It's a big assumption that children need/want the same box-sizing as their parent. 3. I wouldn't want a reset stylesheet to make a non-inheritable property inheritable.
Still, it's absolutely fine if you use it and know what it's doing.
Apr 4, 2025, 10:10 AM@matuzo love the choice of example texts ;)
Apr 4, 2025, 5:38 PM@matuzo Wow! No need to normalize or sanitize it :)
@matuzo Where did you encounter ‘<mark>’ not applying forced-color?
@siblingpastry On Windows it always defaults to a light yellow which can be a problem with some themes. It's based on this post by @aardrian https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM. I tested and confirmed it.
@matuzo @aardrian Shouldn't those system colors be `Mark` and `MarkText`? That's what I've been using the last few years.
`Highlight` means text selection (and is also the system outline color on Windows 11, equivalent to`AccentColor` which isn't supported but would render the same if it was; whereas in macOS, `AccentColor` is opaque and `Highlight` is alpha-blended).
afaik 🙂
@siblingpastry
Yes. When I wrote that post those keywords didn't exist. Both `Mark` and `MarkText` were added in the June 2021 WD:
https://www.w3.org/TR/2021/WD-css-color-4-20210601/#css-system-colors
I appreciate you testing the old post. It really is a bear to keep everything current, so doing your due diligence is the right way to consume it.
Nowhere near a computer, but I’ll update it in the next few days. At this point it’s probably worth a full rewrite.
@aardrian @siblingpastry okay, now that I had time to look at it properly I've decided to leave it as is because Mark and Marktext are the UA defaults anyway. So changing the keywords would be a repetition of the existing rule. It's worth tough considering to create an issue and ask for Mark and MarkText to respect forced colors mode.
> It's worth tough considering to create an issue and ask for Mark and MarkText to respect forced colors mode.
I don’t understand what this means. File an issue with who? And what is the issue?
@aardrian @siblingpastry No, problem, I can explain. :) The issue is described in your article. I'd question if this rule in the UA style sheet is a good idea, or, at least, I'd like to know why they do it.
` mark {
-internal-forced-background-color: yellow;
-internal-forced-color: black;
}
`
For most other elements and properties they use system colors but on mark they force black and yellow.
When I do forced-colors emulation (because flipping in and out blows up a UI control on which I am relying today), I see this in the inspector in both Edge and Chrome for the UA stylesheet:
```
mark {
background-color: mark;
color: marktext;
}
```
And this in CSS you shared:
```
mark {
background-color: Mark;
color: MarkText;
}
```
No other `mark` declarations.
And no `-internal-forced` with Ctrl + F.
@matuzo
So I am curious how you got that since I am not seeing it in the browser(s) nor in the file you linked.
@aardrian @siblingpastry No wonder, I copied the wrong URL. :) The forced colors rules in Chromium are in a separate CSS file.
@matuzo
Ok, that’s interesting because it doesn’t seem to manifest in the inspector.
It’s not clear to me if or how or when those are applied.
How did you encounter this? Or, rather, on what site did you encounter this which triggered these to appear in the UA styles?
@aardrian @siblingpastry I talked to platform devs and they told me that it may have something to do with them using non-standard media queries in their UA styles, and because of these internal properties they use. So it's definitely used but not exposed in Dev Tools.
Again, I didn't discover it, you did. It's on your blog post. I just tested it and confirmed that the color is always yellow/black unless overwritten.
@siblingpastry @aardrian oh, I didn't know that and I didn't notice anything while testing because those old keywords still work. Thanks, I'll update the style sheet!
@matuzo
That’s just it — those “old” keywords work because they are still current and valid keywords. Knowing whether they are still the best choice requires legwork.
@matuzo VoiceOver does support ‘<ins>’ and ‘<del>’
EDIT: only iOS/VO supports them, not macOS/VO unless customized with role-description.
If you hack these with pseudo-content, what about screen readers that already announce them? I don’t think this is a good exception to the general axiom you’ve mentioned (of not doing this with inline semantics)
@siblingpastry I was unsure weather I should add it. I'll do proper screen reader testing and document it. At some point I also plan test with users.
@matuzo Last time I tested these, only ‘<s>’ was unsupported, but that doesn’t preclude other failing circumstances I didn’t encounter. I’ll be interested to hear what you learn about this.
@siblingpastry @matuzo
Always, ALWAYS, test the support I identify in posts. Especially if one is nearly 8 years old and the most recent update is 8 months ago (or, like, 30 browser releases).
Frankly, I hide content in `<s>` in personal projects so I am not tempted to use it.
And I haven’t tested `<ins>` in 5 years.
@siblingpastry
Sweet! Got a URL so I can link it and make that part of my post vaguely more recent?
@aardrian Semi-sweet -- I was partly misremembering now I come back to look at the test page I made. They're both fine in iOS/VO (but don't support role-description), whereas neither are announced in macOS/VO (unless they have a role-description and are focused).
This is the test page: https://cdpn.io/pen/debug/YPzgYVM
This is the application (uses `<mark>` and `<del>` with role-description and interactivity): https://cdpn.io/pen/debug/OJeqBZm
@siblingpastry @aardrian Interesting! When I tested it didn't work in VO. I'll have to check the version I've tested with when I'm back at the office.
@matuzo This is brilliant stuff overall — my other comments are just small things I disagree with 😊
@siblingpastry Thanks for the feedback! 🤗
@matuzo oh hey that's my crusty css reset that I've been meaning to overhaul for ages!
seriously tho, this looks absolutely awesome! i love being able to compare all the different resets.
this might finally give me the motivation to update my reset! 😂❤️
Apr 8, 2025, 5:53 AM@matuzo iteration is what makes the web great 🙌
@matuzo "improving existing user agent styles and adding new styles only where browsers fall short" is exactly my goal whenever i start a minimal css project, most recent one being https://mikemai.net/mcss where i intentionally not define color and background color in most things and rely on UA colors for both light and dark mode.
@matuzo RAD
@matuzo I love this but, wow!, is your logo triggering me! 😅