Add a hotfix for :has() selector

This hotfix requires not using that selector at all, which worsens the experience in Chrome.
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-06-22 20:57:27 +02:00
parent ba118e206f
commit 797ece883e
2 changed files with 31 additions and 65 deletions
+20 -15
View File
@@ -16,51 +16,56 @@ details.block > summary {
cursor: pointer; cursor: pointer;
} }
details.block > summary:has(h1), /* details.block > summary:has(h1),
details.block > summary:has(h2), details.block > summary:has(h2),
details.block > summary:has(h3), details.block > summary:has(h3),
details.block > summary:has(h4), details.block > summary:has(h4),
details.block > summary:has(h5), details.block > summary:has(h5),
details.block > summary:has(h6), details.block > summary:has(h6), */
details.block > summary[data-heading] { details.block > summary[data-has~=h1],
details.block > summary[data-has~=h2],
details.block > summary[data-has~=h3],
details.block > summary[data-has~=h4],
details.block > summary[data-has~=h5],
details.block > summary[data-has~=h6] {
font-variant: small-caps; font-variant: small-caps;
font-weight: bold; font-weight: bold;
line-height: 1.333em; line-height: 1.333em;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
details.block > summary:has(h1), /* details.block > summary:has(h1), */
details.block > summary[data-heading="1"] { details.block > summary[data-has~=h1]{
font-size: 2.0rem; font-size: 2.0rem;
background: $theme-article-heading-h1-background; background: $theme-article-heading-h1-background;
} }
details.block > summary:has(h2), /* details.block > summary:has(h2), */
details.block > summary[data-heading="2"] { details.block > summary[data-has~=h2] {
font-size: 1.8rem; font-size: 1.8rem;
background: $theme-article-heading-h2-background; background: $theme-article-heading-h2-background;
} }
details.block > summary:has(h3), /* details.block > summary:has(h3), */
details.block > summary[data-heading="3"] { details.block > summary[data-has~=h3] {
font-size: 1.6667rem; font-size: 1.6667rem;
background: $theme-article-heading-h3-background; background: $theme-article-heading-h3-background;
} }
details.block > summary:has(h4), /* details.block > summary:has(h4), */
details.block > summary[data-heading="4"] { details.block > summary[data-has~=h4] {
font-size: 1.45rem; font-size: 1.45rem;
background: $theme-article-heading-h4-background; background: $theme-article-heading-h4-background;
} }
details.block > summary:has(h5), /* details.block > summary:has(h5), */
details.block > summary[data-heading="5"] { details.block > summary[data-has~=h5] {
font-size: 1.3333rem; font-size: 1.3333rem;
background: $theme-article-heading-h5-background; background: $theme-article-heading-h5-background;
} }
details.block > summary:has(h6), /* details.block > summary:has(h6), */
details.block > summary[data-heading="6"] { details.block > summary[data-has~=h6] {
font-size: 1.2rem; font-size: 1.2rem;
background: $theme-article-heading-h6-background; background: $theme-article-heading-h6-background;
} }
+11 -50
View File
@@ -546,56 +546,6 @@ class XMediaPlayer {
} }
/*
async function xmr_initialize_player(el) {
let variant = el.querySelector(".variant");
{ // Variants
variant.update = function () {
// Store current state and pause.
let paused = this._media.paused;
let muted = this._media.muted;
let volume = this._media.volume;
let time = this._media.currentTime;
this._media.pause();
play_pause.update();
// Tell the this._media source to begin loading.
this._media.src = variant.value;
this._media.load();
this._media.currentTime = time;
this._media.addEventListener("canplay", () => {
this._media.currentTime = time;
this._media.volume = volume;
this._media.muted = muted;
if (paused) {
this._media.pause();
} else {
this._media.play();
}
play_pause.update();
}, {
"once": true
})
}
variant.addEventListener("input", () => { variant.update(); });
variant.addEventListener("value", () => { variant.update(); });
// Variants - Add options from available sources.
let sources = el.querySelectorAll("source");
for (let k of sources) {
let option = document.createElement("option");
option.value = k.src;
option.textContent = k.title;
variant.appendChild(option);
}
variant.value = this._media.currentSrc;
}
}
*/
(function () { (function () {
'use strict'; 'use strict';
@@ -604,6 +554,17 @@ async function xmr_initialize_player(el) {
document.querySelector("#header #navigation").classList.toggle("open"); document.querySelector("#header #navigation").classList.toggle("open");
}); });
// Shims
// - :has() is missing in many browsers.
document.querySelectorAll("*").forEach((v, k) => {
let s = new Set();
for (let c of v.children) {
s.add(c.tagName.toLocaleLowerCase());
}
if (s.size > 0)
v.dataset["has"] = Array.from(s.values()).join(" ");
});
// Lazily load this._media // Lazily load this._media
xmr_media_lazyload_initialize(); xmr_media_lazyload_initialize();