From 591ea6b976f850d14daefd0be22bb9c6df8f14af Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sun, 30 Jun 2024 15:50:51 +0200
Subject: [PATCH] Handle no-script styling using media query
---
.../AppLayout/components/Html.astro | 30 ++++++++++---------
1 file changed, 16 insertions(+), 14 deletions(-)
diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index f00a676..951fe99 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@@ -130,16 +130,6 @@ const isIOS = parser.getOS().name === "iOS";
</>
)
}
-
- <noscript>
- <style is:global>
- .when-js {
- display: none !important;
- visibility: none !important;
- opacity: 0 !important;
- }
- </style>
- </noscript>
</head>
<body>
@@ -815,14 +805,26 @@ const isIOS = parser.getOS().name === "iOS";
display: none !important;
}
}
+
+ @media (scripting: none) {
+ .when-js {
+ display: none !important;
+ visibility: none !important;
+ opacity: 0 !important;
+ }
+ }
+
+ @media (scripting: enabled) {
+ .when-no-js {
+ display: none !important;
+ visibility: none !important;
+ opacity: 0 !important;
+ }
+ }
</style>
{/* ------------------------------------------- JS --------------------------------------------- */}
-<script is:inline>
- Array.from(document.querySelectorAll(".when-no-js")).forEach((node) => node.remove());
-</script>
-
<script is:inline>
document.querySelectorAll("a").forEach((element) => {
const href = element.getAttribute("href");