String Names for Keyframes and a Style Query Syntax Quirk

Peter Kröner surfaced a curious CSS fact: keyframe names can be strings. It's an edge case that's been supported cross-browser for over a decade, yet most developers likely never encounter it. The syntax validates if you ever need a keyframe name like @keyframes itself.

@keyframes "@animation" {
  /* ... */
}

#animate-this {
  animation: "@animation";
}

Temani Afif also highlighted a little-known alternative in style queries: the equals sign can replace the colon. The two operators evaluate custom properties differently, which matters when you're toggling values based on a custom property's state.

.Jay-Z {
  --Problems: calc(98 + 1);

  /* Evaluates as calc(98 + 1), color is blueivy */
  color: if(style(--Problems: 99): red; else: blueivy);

  /* Evaluates as 99, color is red */
  color: if(style(--Problems = 99): red; else: blueivy);
}

Declarative Dialogs and a Trimmed Visually-Hidden Utility

David Bushell demonstrated creating <dialog> elements declaratively with invoker commands, avoiding JavaScript entirely. The approach now works across all major browsers.

A follow-up question from Ana Tudor led Bushell to revisit the classic .visually-hidden utility class. His analysis asks whether the usual seven styles are still the minimum required, suggesting there may be room for a leaner implementation.

Truncating From the Middle and Other CSS Techniques

Wes Bos shared a flexbox-based trick for truncating text from the middle of a string, responding to a Reddit demo that didn't include its source code. Donnie D'Amato attempted a more native approach using ::highlight(), but that pseudo-element has limitations. Henry Wilkinson noted that Hazel Bachrach's 2019 proposal for a native solution remains an open issue in the CSSWG repository.

Theo Soti published a walkthrough on managing color variables with relative color syntax. It's not a new feature, but the guide offers a thorough treatment of the complexities involved.

Richard Rutter contributed an in-depth guide to customizing lists with modern CSS. It covers lesser-known features like symbols(), @counter-style, and the extends descriptor, alongside a companion piece from Juan Diego on styling counters.

A table with headings titled CSS and USE CASE detailing HTML list customizations. It lists the property list-style for basic bullet styles; the pseudo-element li::marker for coloring numbering; the function symbols() for Firefox-specific styles; the at-rule @counter-style for custom numbering systems; the descriptor extends for modifying existing systems; and the pseudo-element li::before for advanced marker positioning.
Source: Piccalilli.

Typography Features: The :heading Pseudo-Class

Safari Technology Preview 237 began trialing the :heading/:heading() pseudo-class. Stuart Robson explains how it works, and his follow-up demonstrates combining it with pow() for cleaner typographic scale logic. A simpler approach sticks with traditional <h1> through <h6> elements and uses :heading without the sibling-index() function:

:root {
  --font-size-base: 16px;
  --font-size-scale: 1.5;
}

:heading {
  /* Other heading styles */
}

/* Assuming only base/h3/h2/h1 */

body {
  font-size: var(--font-size-base);
}

h3 {
  font-size: calc(var(--font-size-base) * var(--font-size-scale));
}

h2 {
  font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
}

h1 {
  font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
}

border-shape and Other New Capabilities

Una Kravets introduced border-shape, which differs from the previously proposed corner-shape property. Rather than adjusting corners on an existing border, border-shape redefines the border itself, supporting more shapes and integrating with the shape() function.

Source: Una Kravets.

For developers ready to adopt modern CSS practices, the modern.css project offers a growing collection of 75+ code snippets designed to replace outdated patterns.

Screenshot of a website titled modern.css showing browser compatibility filters and six code snippets, labeled with their category (e.g., SELECTORS or LAYOUT), difficulty level, topic, an example of outdated code to avoid, a browser support percentage, and a link to view the modern solution.

Browser Updates and Interop 2026

Firefox 148 shipped the shape() function as a baseline feature, having previously required a flag. Safari Technology Preview 237 was the first to trial :heading.

Chrome, Safari, and Firefox also announced their Interop 2026 targets, outlining the web platform features they plan to make consistent across browsers this year. Additionally, the scrolled keyword for scroll-state container queries is testable now in Chrome Canary, which Bramus has documented for hiding headers on scroll.