Update browser support to Firefox ESR, Safari 15.6+, evergreen (Fix #1145) - #1135
Open
stephaniehobson wants to merge 2 commits into
Open
stephaniehobson wants to merge 2 commits into
stephaniehobson wants to merge 2 commits into
Conversation
Replaces the stale "defaults, IE 8" browserslist query in package.json
with an explicit matrix: Firefox ESR, current Firefox, Safari/iOS >= 15.6,
and the last 2 versions of Chrome, Edge, Opera, and Samsung Internet.
This query is read by cssnano (via css-minimizer-webpack-plugin) for the
shipped, minified CSS, and now drives Babel's compile target directly --
removed the hardcoded targets: { ie: '10' } override from all four
babel-loader configs (docs site JS, Fractal theme JS, npm package JS, and
the test bundle) so @babel/preset-env reads the browserslist config
instead. Verified the compiled package JS now retains ES2015+ syntax
(arrow functions) that was previously downleveled for IE10.
Also updates docs and comments that assumed IE/legacy browser support:
- New docs/02-usage/03-browser-support.md documenting the matrix
- CHANGELOG.md: filled in the v23 placeholder, expanded Browser Support
- AGENTS.md: corrected the stale "target IE10" JS description
- Removed the now-false claim in themes.md that Protocol still ships a
Sass-variable fallback theme for browsers without CSS custom properties
(removed separately when _themes-sass.scss's Sass color variables were
deleted)
- Removed now-moot 'older browsers' caveats about <details>, CSS grid,
and inline SVG support in three component readmes
Part of the v23 browser-support workstream (#1084). CSS/JS dead-code
removal for the new matrix follows in separate stacked PRs.
Verified: npm run lint, npm test (47 specs, Firefox + Chrome), and
npm run build-package all pass.
stephaniehobson
commented
Sep 9, 2026
There was a problem hiding this comment.
🟢 Approval recommended
The changes consistently align build targets and documentation to the new Browserslist matrix, with only minor documentation polish noted.
Pull request overview
Updates Protocol’s declared browser support and aligns the build pipeline (CSS minification + Babel transpilation) to use a single, explicit browserslist matrix, with accompanying documentation and changelog updates as part of the v23 workstream (#1084).
Changes:
- Replaced legacy Browserslist settings with a Firefox ESR / Safari 15.6+ / evergreen-focused matrix in
package.json. - Removed the hardcoded Babel IE10 targets from webpack configs so
@babel/preset-envreads the project’s Browserslist config. - Updated/added documentation and release notes to reflect the new support stance and remove outdated legacy-browser statements.
File summaries
| File | Description |
|---|---|
package.json |
Defines the new Browserslist matrix that drives Babel and CSS minification targets. |
webpack.docs.build.config.js |
Removes the IE10 Babel target override for both Protocol docs JS and Fractal theme JS builds. |
webpack.package.build.config.js |
Removes the IE10 Babel target override for the packaged (npm) JS build. |
webpack.test.config.js |
Removes the IE10 Babel target override for the unit test bundle build. |
docs/02-usage/03-browser-support.md |
Adds a dedicated Browser Support page documenting the new support matrix and implications. |
docs/01-fundamentals/02-themes.md |
Removes outdated note claiming a Sass-variable fallback theme for legacy browsers. |
CHANGELOG.md |
Fills in the v23 placeholder text and documents the browser support/babel targeting breaking changes. |
AGENTS.md |
Updates repo guidance to reflect that JS targets the Browserslist matrix (not IE10). |
components/layout/02-columns/readme.md |
Removes legacy-browser caveats about CSS Grid given the new support matrix. |
components/button/button--with-icon.readme.md |
Removes legacy-browser caveat about inline SVG support. |
components/00-basic-elements/details/readme.md |
Updates <details> guidance to reflect supported browsers and removes polyfill/back-compat framing. |
Review details
- Files reviewed: 11/11 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Answering the review question directly: no polyfill was removed here,
because assets/js/protocol/details.js doesn't polyfill native
<details>/<summary> at all -- it's a separate, general-purpose
"convert headings into an accordion" component (MzpDetails) that
happens to also work on <summary> elements. The component readme's
old claim that Protocol "includes a JavaScript polyfill" for native
<details> was already inaccurate before this PR; the previous commit
here corrected that framing.
What I missed the first time: components/details-component/ (a
*different* readme/demo than the one above) did contain a real,
intentional polyfill *usage pattern* -- its example script checked
`if (!MzpSupports.details) { MzpDetails.init('summary'); }`, using
MzpDetails to retrofit accordion behavior onto <summary> elements in
browsers lacking native <details> support. Since MzpSupports.details
is unconditionally true across the new matrix (native <details> has
been supported in Safari since 6, Firefox since 49, every evergreen
browser for years), that branch can no longer execute for anyone
following our documented support policy. Removed it from both the
demo HTML and the readme's copy of the same snippet -- confirmed in
the built docs output.
Left MzpSupports.details itself untouched in supports.js: it's still
a documented public API property, just with zero remaining internal
consumers now (same "keep the public API, the internal usage is what
was dead" shape as the matchMedia/classList cleanup in the JS PR).
Removing the property itself is the same bigger, separate breaking-API
call already deferred there.
Also applied the other pending review suggestions on this PR:
- Simplified the evergreen-browsers bullet in the new Browser Support
doc page to match the styling of the other two bullets, and trimmed
two sentences (the CHANGELOG cross-reference, the "Protocol won't
provide them" clause).
- Trimmed the CHANGELOG intro paragraph and Browser Support bullet to
drop redundant detail now that the dedicated docs page covers it.
- Copilot flagged the hardcoded protocol.mozilla.org domain in the
<details> readme's link -- switched to a site-relative
/docs/usage/browser-support.html path instead, so it resolves
correctly on local Fractal dev and any alternate host too. Verified
this is the real canonical path (matches the dist/ build output and
CHANGELOG.md's own existing links), not one of the legacy
/fundamentals/* paths that only work via netlify.toml redirects.
Verified: npm run lint and npm run build-docs (524 items, no errors --
confirmed the details-component demo's rendered output no longer
contains the removed polyfill branch).
stephaniehobson
force-pushed
the
v23/support-config
branch
from
September 10, 2026 20:12
b1dbcb4 to
f0cbcdf
Compare
stephaniehobson
added a commit
that referenced
this pull request
Sep 10, 2026
Everything here is unconditionally true for Firefox ESR, Safari 15.6+, and evergreen browsers, so the feature-query gates and legacy prefixes around it are dead weight. - Unwrapped @supports (position: sticky) in _navigation.scss and @supports (display: flex) in _menu.scss. The menu.scss case merges align-items/display: flex directly into the existing .mzp-c-menu-title rule, replacing its display: block fallback outright rather than keeping a separate feature-query block for a feature every supported browser has. - Removed the base/elements/_reset.scss block resetting article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, and summary to display: block -- every one of these has had correct default display in every supported browser for over a decade. Left the audio/video/canvas -> inline-block reset alone: that's a deliberate style choice (those are inline-level by spec in every browser), not a legacy-browser shim, so it doesn't belong to this cleanup. - Removed the &::-ms-expand selector in the Select form reset (pure legacy IE/Edge, matches nothing in any supported browser). - Replaced -webkit-appearance with the standard unprefixed appearance property in the two remaining form resets (search decoration, file upload button) and removed their now-unnecessary stylelint-disable comments. Re-enabled property-no-vendor-prefix and value-no-vendor-prefix in .stylelintrc.json as the ongoing enforcement lever -- confirmed empirically these two were the only real hits; the rules don't flag vendor-prefixed pseudo-elements (::-moz-focus-inner, ::-webkit-details-marker) or non-standard, prefix-only properties (-moz-osx-font-smoothing, -webkit-font-smoothing) that have no unprefixed equivalent, so the other 6 remaining prefixes in the codebase are correctly left alone. - appearance: button was flagged separately as a deprecated keyword for the unprefixed property (declaration-property-value-keyword-no-deprecated); changed to appearance: auto, which is the correct modern equivalent (native appearance for that pseudo-element is already button-shaped). - Removed stale "in IE"/"in Edge and IE" references from three comment blocks in _forms.scss. Left the normalize.css resets those comments document in place -- e.g. the textarea scrollbar and legend box-sizing resets -- since I can't confirm from source alone that every supported browser makes them fully redundant, and that's a bigger, separate call from removing definitively dead code like the @supports/-ms-/reset.scss cases above. Stacked on #1135 (v23/support-config). Part of #1084. Verified: npm run lint, npm test (47 specs, Firefox + Chrome), and a direct sass --verbose compile confirming the merged menu-title rule, the unwrapped sticky-nav rule, and the removed -ms-/@supports code in the compiled CSS.
stephaniehobson
changed the title
stephaniehobson
marked this pull request as ready for review
September 11, 2026 17:21
stephaniehobson
added this pull request to stack #1146
September 11, 2026 17:21
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Update browser support matrix to Firefox ESR, Safari 15.6+, evergreen.
CHANGELOG.md.Issue
Fix #1145
Testing
Part of the v23 browser-support workstream (#1084). CSS/JS dead-code removal for the new matrix follows in separate stacked PRs.