chore: replace js/no-js class toggle with scripting media

lozinsky · lozinsky · commit d9c7d75fa32d · 2024-12-08T00:45:15.000+03:00
diff --git a/index.css b/index.css
@@ -187,28 +187,50 @@ a {
   color: var(--background-color);
 }
 
-.js collapse-handle[disabled].follow,
-.js effects-player:not([stopped]).follow,
-.no-js collapse-handle.follow {
-  background-image: unset;
-  cursor: unset;
+@media (scripting: enabled) {
+  collapse-handle[disabled].follow,
+  effects-player:not([stopped]).follow {
+    background-image: unset;
+    cursor: unset;
+  }
+}
+
+@media (scripting: none) {
+  collapse-handle.follow {
+    background-image: unset;
+    cursor: unset;
+  }
 }
 
-.js collapse-entry[opened]:not([once]) > *:not(collapse-content),
-.no-js collapse-entry:not([once]) > *:not(collapse-content) {
-  display: none;
+@media (scripting: enabled) {
+  collapse-entry[opened]:not([once]) > *:not(collapse-content) {
+    display: none;
+  }
 }
 
-.no-js collapse-content,
-.no-js span[hidden] {
-  display: inline;
+@media (scripting: none) {
+  collapse-entry:not([once]) > *:not(collapse-content) {
+    display: none;
+  }
+
+  collapse-content,
+  span[hidden] {
+    display: inline;
+  }
+
+  p[hidden] {
+    display: block;
+  }
 }
 
-.no-js p[hidden] {
-  display: block;
+@media (scripting: enabled) {
+  .no-js-only {
+    display: none;
+  }
 }
 
-.js .no-js-only,
-.no-js .js-only {
-  display: none;
+@media (scripting: none) {
+  .js-only {
+    display: none;
+  }
 }
diff --git a/index.html b/index.html
@@ -1,16 +1,12 @@
 <!doctype html>
-<html lang="en" class="no-js">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Frontend developer interested in design systems, user and dev experiences." />
 
     <title>Pavel Lozinsky</title>
 
-    <script>
-      document.documentElement.classList.replace('no-js', 'js');
-    </script>
-
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/favicon.ico" sizes="any" />
 
