USWDS - Normalize: Remove outdated normalizations #5555
Conversation
mejiaj
added
the
Status: Triage
thisisdano
added
Role: Dev
There was a problem hiding this comment.
LGTM — thanks for adding the license info!
Browsers tested
- Chromium 120
- Firefox 122
- Safari 17.1.2
I also created a test branch [test-aduth-modern-normalize] on uswds/uswds-site and found no issues in Accordion or Banner (tested because they rely on hidden).
This update saves 2KB on CSS, 6KB → 4KB.
There was a problem hiding this comment.
This looks good to me! Just one question left on a changed line.
Note
I had to pull the latest changes from develop to resolve some visual discrepancies that have been previously addressed.
- No build errors
- No visual regressions perceived on changed elements
- Visual display consistent across browsers
There was a problem hiding this comment.
I tested this in Firefox, Safari, and Chromium and didn't see any regressions for the changed elements.
I wanted to flag that I found one small difference in appearance in <hr> elements in Firefox after this change, but I don't think it should be considered a blocker. I've added details in the comment below.
| */ | ||
|
|
||
| hr { | ||
| box-sizing: content-box; /* 1 */ | ||
| height: 0; /* 1 */ | ||
| overflow: visible; /* 2 */ | ||
| color: inherit; /* 2 */ |
There was a problem hiding this comment.
Note
This changes the color of the <hr/> in firefox. After this change, the color now matches the value set for $theme-text-color. It is a subtle difference that can be hard to capture in the screenshot, but can be found in its computer color value:
I am assuming that this is desired behavior, but wanted to flag this as a change.
There was a problem hiding this comment.
@amyleadem The change in color to the rule looks correct.
Source: The Thematic Break (Horizontal Rule) element - HTML: HyperText Markup Language | MDN.
There was a problem hiding this comment.
Yes, I believe this is expected and was able to trace this back to smoothing out a Firefox inconsistency.
See:
|
Really appreciate all the work done here. We've put a hold on this PR for now, but we're going to look at how we can include this and other opt out features in an upcoming release. For now, I've moved it to the 3.9.0 release milestone. |
Summary
Update normalize styles to remove outdated normalizations. Reduces the compiled size of normalization styles.
Related issue
Closes #4701
Problem statement
As a developer, I expect that USWDS applies its stated browser support to source code, so that I'm not misled by unexpected behaviors, or unnecessarily inflating the size of my compiled artifacts for end-users.
As an end-user, I expect that sites using USWDS load quickly, so that I'm not stuck waiting for pages to load in order to access the content I'm seeking.
Solution
The solution here refines the existing normalize stylesheet to prune styles which are not needed, either due to improvements in the affected browsers, or due to the browser no longer being supported (e.g. Internet Explorer). These refinements were applied manually, using the following projects as references:
An alternative / future-proof solution could consider incorporating something like PostCSS Normalize, which aims to automatically prune styles from the base normalization script using a project's own browserslist configuration.