Chris’ Corner: Little Bits of CSS

Adam Argyle is clear with some 2025 CSS advice:

I think every front-end developer should know how to enable page transitions, transition a <dialog>, popover, and <details>, animate light n’ dark gradient text, type safe their CSS system, and add springy easing to animation.

Nobody asked me, but if I had to pick a favorite of Adam’s six, it’s all the stuff about animating <dialog>, popover, and <details>. There is a lot of interesting new-ish CSS stuff in there that will help you all around, between allow-discrete, overlay, ::backdrop, :popover-open, @starting-style, and more.

/* enable transitions, allow-discrete, define timing */
[popover], dialog, ::backdrop {
  transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
  opacity: 0;
}

/* ON STAGE */
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
  opacity: 1;
}

/* OFF STAGE */
/* starting-style for pre-positioning (enter stage from here) */
@starting-style {
  :popover-open,
  :popover-open::backdrop,
  [open],
  [open]::backdrop {
    opacity: 0;
  }
}

Jeremy Keith also did a little post with CSS snippets in it, including a bit he overlaps with Adam on, where you by default opt-in to View Transitions, even if that’s all you do.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

The idea is you get the cross-fade right way and then are set up to sprinkle in more cross-page animation when you’re ready.

Una Kravets has a post about the very new @function stuff in CSS with a bunch of examples. I enjoyed this little snippet:

/* Take up 1fr of space for the sidebar on screens smaller than 640px, and take up the --sidebar-width for larger screens. 20ch is the fallback. */
@function --layout-sidebar(--sidebar-width: 20ch) {
  result: 1fr;
  
  @media (width > 640px) {
    result: var(--sidebar-width) auto;
  }
}

.layout {
  display: grid;
  grid-template-columns: --layout-sidebar();
}

I’m intrigued by the idea of being able to abstract away the logic in CSS when we want to. Perhaps making it more reusable and making the more declarative parts of CSS easier to read.

Here’s another. I had absolutely no idea design control over the caret was coming to CSS (the thing in editable areas where you’re typing, that is usually a blinking vertical line). I guess I knew we had caret-color, which is prettttttty niche if you ask me. But now apparently we’re given control over the shape and literal animation of the caret.

textarea {
  color: white;
  background: black;
  caret-shape: block;
  caret-animation: manual;
  animation: caret-block 2s step-end infinite;
}

@keyframes caret-block {
   0% { caret-color: #00d2ff; }
  50% { caret-color: #ffa6b9; }
}

Jump over to the Igalia blog post to see the video on that one.

OK that’s all for this week. Er wait actually you gotta watch Julia Miocene’s Chicken video. Now I’m done.