Skip to content

Commit

Permalink
Avoid :has selector in CSS. (WebKit#395)
Browse files Browse the repository at this point in the history
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
`<html data-visible-section="home">` in index.html, and we
can avoid the `:has` selector.

Now Speedometer can run in older browsers which don't support `:has`.
  • Loading branch information
mstange authored Mar 6, 2024
1 parent 406042a commit 3d2a28e
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 4 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down
8 changes: 5 additions & 3 deletions resources/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
Expand Down
6 changes: 6 additions & 0 deletions resources/main.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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") ?? "";
Expand Down

0 comments on commit 3d2a28e

Please sign in to comment.