slachiewicz opened a new issue, #1765: URL: https://github.com/apache/maven-site/issues/1765
The new skin planned for maven.apache.org and the component sites (Fluido 3: no CSS framework, no JavaScript required, light by default with an optional Light/Dark/Auto theme switch) needs a browser floor. Two options work; the prototype follows option A. ## Option A: compatible (proposed) Two tiers: | Tier | Browsers | What the skin promises | |---|---|---| | Full support | Chrome and Edge from the last four years, Firefox ESR 115 and later, Safari 15.4 and later | Looks as designed; tested before each release | | Usable | Browsers with CSS grid and custom properties (2017–2018) | Text readable, navigation works; spacing and details may differ | Firefox 115 ESR is the last Firefox for Windows 7, 8 and 8.1 and gets security updates until March 2027 ([Mozilla](https://support.mozilla.org/kb/firefox-users-windows-7-8-and-81-moving-extended-support)). Safari 15.4 covers iPhones that stop at iOS 15 (6s, 7); the 8 and X stop at iOS 16. What this costs in the stylesheet: plain custom properties with the dark values written out, item margins instead of flex `gap`, `grid-column-gap` and `-webkit-sticky` next to the current names, no `:is()` in selector lists, and an ES5 script. ## Option B: modern Full support starts around mid-2024. First versions with each feature, from MDN browser-compat-data 8.1.7: | Feature | Chrome, Edge | Firefox | Safari | |---|---|---|---| | `light-dark()` | 123 | 120 | 17.5 | | `:has()` | 105 | 121 | 15.4 | | CSS nesting | 120 | 117 | 17.2 | | `color-mix()` | 111 | 113 | 16.2 | | flex `gap` | 84 | 63 | 14.1 (iOS 14.5) | | `:is()` | 88 | 78 | 14 | What it changes: - Colours become one block of `light-dark()` values, and the theme switch only sets `color-scheme`. - Flex `gap`, `:is()` and `color-mix()` replace the margin workarounds, the written-out selector lists and the hard-coded hover and border shades; the prefixed fallbacks go. - The script can use current JavaScript syntax, which is cosmetic for a script this small. What older browsers get: without `light-dark()`, every colour variable is invalid, so the page falls back to the browser's default colours. Text stays readable and the layout holds, but the page looks unstyled and the dark theme does not work. Firefox ESR 115 and iPhones on iOS 16 or earlier are in this group. CSS nesting stays out under either option: a browser without it drops every nested rule, which breaks the layout. ## Data that settles it The browser-version report for maven.apache.org in Matomo (analytics.apache.org): the share of visits from browsers older than Chrome 123, Firefox 120 and Safari 17.5 over the last six months. If that share is negligible, option B; otherwise option A now, revisited when Firefox 115 ESR support ends in March 2027. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
