diff --git a/CHANGELOG.md b/CHANGELOG.md index c3376a9..21666af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,11 @@ at boot. Entries start at 0.3.0. ### The mobile nav stays reachable on engines without `:has()` -At 860px and narrower, an engine without `:has()` (Chromium below 105, such as webOS TV 22 and 23) -hid the sidebar off-canvas with no way to open it, so no page behind the nav could be reached. Now -the sidebar moves off-canvas, behind the hamburger, only where `:has()` works. Elsewhere it stays in -the flow above the content and the hamburger is hidden. +At 860px and narrower, an engine without `:has()` (Chromium below 105, such as webOS TV 22 and 23, +and Firefox below 121) hid the sidebar off-canvas with no way to open it, so the pages the nav links +to could not be reached. Now the sidebar moves off-canvas, behind the hamburger, only where `:has()` +works. Elsewhere it stays in the flow above the content and the hamburger is hidden. + ### The whole nav tree shows on engines without `:has()` On an engine without `:has()` (Chromium below 105, such as webOS TV 22 and 23, and Firefox below 121) diff --git a/src/ui/stylesheet-floor.test.ts b/src/ui/stylesheet-floor.test.ts index d651fd9..e37bfa0 100644 --- a/src/ui/stylesheet-floor.test.ts +++ b/src/ui/stylesheet-floor.test.ts @@ -50,8 +50,8 @@ test("styles.css hides the theme switch and the nav toggles where :has() is miss assert.match(block, /\.nav-disc\s*\{\s*visibility:\s*hidden/); }); -// Without `:has()` nothing can check #nav-toggle, so an off-canvas sidebar there is unreachable -// and the hamburger does nothing: the sidebar has to stay in the flow, with the hamburger hidden. +// Without `:has()` nothing reads #nav-toggle, so an off-canvas sidebar there is unreachable and the +// hamburger does nothing: the sidebar has to stay in the flow, with the hamburger hidden. test("styles.css moves the sidebar off-canvas at 860px only inside @supports selector(:has(a))", () => { const open = stylesheet.indexOf("@media (max-width: 860px) {"); assert.ok(open >= 0, "no @media (max-width: 860px) block");