Keep the mobile nav reachable on engines without :has(), and fix the stylesheet header #183

Merged
lilleman merged 6 commits from item-36 into main 2026-10-31 02:13:26 +01:00
2 changed files with 7 additions and 6 deletions
Showing only changes of commit 6815caa47e - Show all commits
+5 -4
View File
@@ -8,10 +8,11 @@ at boot. Entries start at 0.3.0.
### The mobile nav stays reachable on engines without `:has()` ### 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) 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 and Firefox below 121) hid the sidebar off-canvas with no way to open it, so the pages the nav links
the sidebar moves off-canvas, behind the hamburger, only where `:has()` works. Elsewhere it stays in to could not be reached. Now the sidebar moves off-canvas, behind the hamburger, only where `:has()`
the flow above the content and the hamburger is hidden. works. Elsewhere it stays in the flow above the content and the hamburger is hidden.
### The whole nav tree shows on engines without `:has()` ### 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) On an engine without `:has()` (Chromium below 105, such as webOS TV 22 and 23, and Firefox below 121)
+2 -2
View File
@@ -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/); 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 // Without `:has()` nothing reads #nav-toggle, so an off-canvas sidebar there is unreachable and the
// and the hamburger does nothing: the sidebar has to stay in the flow, with the hamburger hidden. // 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))", () => { test("styles.css moves the sidebar off-canvas at 860px only inside @supports selector(:has(a))", () => {
const open = stylesheet.indexOf("@media (max-width: 860px) {"); const open = stylesheet.indexOf("@media (max-width: 860px) {");
assert.ok(open >= 0, "no @media (max-width: 860px) block"); assert.ok(open >= 0, "no @media (max-width: 860px) block");