<section>
<p>Not fixed (layout shifts on interest)</p>
<nav>
<a href="#">Foo</a>
<a href="#">Bar</a>
<a href="#">Baz</a>
</nav>
</section>
<section>
<p>Fixed (no shift on interest)</p>
<nav class="fixed">
<a href="#">Foo</a>
<a href="#">Bar</a>
<a href="#">Baz</a>
</nav>
</section>
.fixed > a:is(:hover, :focus-visible) {
font-variation-settings: "GRAD" 800;
}
:not(nav.fixed) > a:is(:hover, :focus-visible) {
font-weight: 800;
}
@layer demo.support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
scrollbar-color: color-mix(in srgb, CanvasText, #0000 50%) #0000;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
gap: 10vh;
}
nav {
display: flex;
gap: 2ch;
> a {
outline-offset: 5px;
}
}
section {
display: grid;
gap: 1ex;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.