Keep the mobile nav reachable on engines without :has(), and fix the stylesheet header #183
+5
-4
@@ -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)
|
||||||
|
|||||||
@@ -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");
|
||||||
|
|||||||
Reference in New Issue
Block a user