Avoid :has selector in CSS. (#395)

mstange · web-flow · commit 3d2a28e2dcd7 · 2024-03-06T11:02:43.000-08:00
This changes how section visibility is controlled.
All sections are still `display:none` by default.
Rather than becoming `display:block` when they match `:target`,
they now become `display:block` if their ID matches the value
of the root element's `data-visible-section` attribute - we hardcode
the four section names "home", "running", "summary" and "details".

This lets us default to the home section just by setting
`&lt;html data-visible-section="home"&gt;` in index.html, and we
can avoid the `:has` selector.

Now Speedometer can run in older browsers which don't support `:has`.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-visible-section="home">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=850" />
diff --git a/resources/main.css b/resources/main.css
@@ -304,9 +304,11 @@ section {
     border-radius: 20px;
 }
 
-section:target,
 section.visible,
-body:not(body:has(section:target)) #home {
+:root[data-visible-section="home"] #home,
+:root[data-visible-section="running"] #running,
+:root[data-visible-section="summary"] #summary,
+:root[data-visible-section="details"] #details {
     display: block;
 }
 
@@ -468,7 +470,7 @@ section#instructions .section-content > * {
     padding-left: calc((var(--viewport-width) - var(--text-width)) / 2);
 }
 
-section#details:target {
+:root[data-visible-section="details"] section#details {
     display: flex;
     flex-direction: column;
 }
diff --git a/resources/main.mjs b/resources/main.mjs
@@ -355,9 +355,15 @@ class MainBenchmarkClient {
         } else {
             window.location.hash = hash;
         }
+        this._updateVisibleSectionAttribute(hash);
         this._updateDocumentTitle(hash);
     }
 
+    _updateVisibleSectionAttribute(hash) {
+        const sectionId = hash.substring(1);
+        document.documentElement.setAttribute("data-visible-section", sectionId);
+    }
+
     _updateDocumentTitle(hash) {
         const maybeSection = document.querySelector(hash);
         const sectionTitle = maybeSection?.getAttribute("data-title") ?? "";

Original file line number	Diff line number	Diff line change
`@@ -304,9 +304,11 @@ section {`
`304`	`304`	`border-radius: 20px;`
`305`	`305`	`}`
`306`	`306`
`307`		`-section:target,`
`308`	`307`	`section.visible,`
`309`		`-body:not(body:has(section:target)) #home {`
	`308`	`+:root[data-visible-section="home"] #home,`
	`309`	`+:root[data-visible-section="running"] #running,`
	`310`	`+:root[data-visible-section="summary"] #summary,`
	`311`	`+:root[data-visible-section="details"] #details {`
`310`	`312`	`display: block;`
`311`	`313`	`}`
`312`	`314`
`@@ -468,7 +470,7 @@ section#instructions .section-content > * {`
`468`	`470`	`padding-left: calc((var(--viewport-width) - var(--text-width)) / 2);`
`469`	`471`	`}`
`470`	`472`
`471`		`-section#details:target {`
	`473`	`+:root[data-visible-section="details"] section#details {`
`472`	`474`	`display: flex;`
`473`	`475`	`flex-direction: column;`
`474`	`476`	`}`