Snippets

You can define the highest possible z-index by using the numeric keyword infinity.

.element {
  z-index: calc(infinity);
}

Using the relative color syntax, you can reuse the link color and define a slightly darker color by subtracting lightness from the original color.

html {
  --color-link: oklch(0.63 0.2 9.96);
}

a:link {
  color: var(--color-link);
}

a:visited {
  color: oklch(from var(--color-link) calc(l - 0.1) c h);
}

The command and commandfor attributes enable you to open and close modal dialogs without JavaScript.

<button commandfor="my-modal" command="show-modal" aria-haspopup="dialog">
  Login
</button>

<dialog id="my-modal" closedby="any">
  <button command="close" commandfor="my-modal">close</button>

  <h1>Login</h1>
</dialog>