Personal Site
Add a "no anchor" support warning to index. this delays for a couple seconds before rendering, to allow the polyfill to kick in and js to hide it. this will cause CLS but it'll be such a small percentage of users (fractions of already low user counts) im not concerned
+40
-2
+26
src/components/home/Landing.astro
+26
src/components/home/Landing.astro
···
30
30
--box-circle-mask-png: url("${boxCircleMask.src}");`}
31
31
>
32
32
<h2>Hello World 🏳️⚧️</h2>
33
+
<p class="no-anchor-warning">
34
+
⚠️ Your browser doesnt support anchor positioning or javascript!
35
+
</p>
33
36
<figure>
34
37
<img src={avatar ?? "http://undefined"} alt="" />
35
38
<figcaption>bsky pfp</figcaption>
···
101
104
102
105
p {
103
106
margin-block: 5px;
107
+
}
108
+
109
+
@keyframes fade-in {
110
+
from, to {
111
+
height: auto;
112
+
}
113
+
114
+
to {
115
+
opacity: 1;
116
+
}
117
+
}
118
+
119
+
.no-anchor-warning {
120
+
@supports (top: calc(anchor(--player bottom) + 10px)) {
121
+
display: none;
122
+
}
123
+
124
+
background: rgb(from goldenrod r g b / 0.2);
125
+
padding: 5px;
126
+
127
+
opacity: 0;
128
+
height: 0;
129
+
animation: 0s ease-in-out 2s 1 forwards fade-in;
104
130
}
105
131
</style>
+14
-2
src/components/home/playing/NowPlaying.astro
+14
-2
src/components/home/playing/NowPlaying.astro
···
396
396
397
397
if (!CSS.supports("top", "calc(anchor(--player bottom) + 10px)")) {
398
398
// enable anchor polyfill
399
-
// @ts-expect-error ts cant find remote types lol
400
-
import("https://unpkg.com/@oddbird/css-anchor-positioning");
399
+
const { default: anchor } = await import(
400
+
// @ts-expect-error ts cant find remote types lol
401
+
"https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js"
402
+
);
403
+
404
+
anchor().then(() =>
405
+
document
406
+
.querySelectorAll(".no-anchor-warning")
407
+
.forEach((el) =>
408
+
el instanceof HTMLElement
409
+
? el.style.setProperty("display", "none")
410
+
: null,
411
+
),
412
+
);
401
413
}
402
414
/*************
403
415
* FUNCTIONS *