| 1 |
|
| 2 |
|
| 3 |
The carousel's default state shows ONE frame, because that is what a visitor |
| 4 |
with JavaScript sees and the page must not visibly rearrange itself on load. |
| 5 |
Rendering all three and collapsing them cost a 141px -> 58px jump on every |
| 6 |
load, measured 2026-08-14, and everyone with JS paid it so that the few |
| 7 |
without could reach frames two and three. |
| 8 |
|
| 9 |
This is how both are had. <noscript> content is parsed only when scripting is |
| 10 |
disabled, so with JS on these rules do not exist and the page is settled from |
| 11 |
first paint; with JS off they arrive and open the stack out, because the |
| 12 |
controls that would page through it are never going to run. |
| 13 |
|
| 14 |
Only the frames. The control row needs nothing said about it here: makeover |
| 15 |
hides `.showing` until something sets [data-ready], and with scripting off |
| 16 |
nothing ever will. |
| 17 |
|
| 18 |
A separate file rather than an inline <style> because the CSP is |
| 19 |
`style-src 'self'`. Report-only today, but writing markup that depends on a |
| 20 |
policy staying lax is how it stops being lax later and quietly breaks. |
| 21 |
|
| 22 |
[data-widget="carousel"] > .showing-frame { |
| 23 |
display: block; |
| 24 |
} |
| 25 |
|