From 3d2a28e2dcd736bc6bb381ec94a48d637d2b6655 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Wed, 6 Mar 2024 14:02:43 -0500 Subject: [PATCH] Avoid :has selector in CSS. (#395) 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 `` in index.html, and we can avoid the `:has` selector. Now Speedometer can run in older browsers which don't support `:has`. --- index.html | 2 +- resources/main.css | 8 +++++--- resources/main.mjs | 6 ++++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index acc930f66..5d4ff8ab7 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/resources/main.css b/resources/main.css index 97a25749f..9c7099d8f 100644 --- 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 index 11a7e59b7..ea9145408 100644 --- 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") ?? "";