Modern CSS Evolution: String Keyframes, Style Queries, and Experimental Border Shapes

What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More | CSS-Tricks

Peter Kröner revealed that CSS @keyframes names can be defined as strings, a feature with cross-browser support for over 11 years. Safari Technology Preview 237 has also introduced the :heading pseudo-class to streamline type scaling logic.

Why This Matters

Engineers often rely on legacy CSS patterns while modern specifications provide native, more efficient alternatives for complex UI challenges like middle-text truncation and declarative dialogs. Shifting to native features like relative color syntax and the upcoming border-shape property reduces technical debt and JavaScript overhead, although browser consistency remains a primary focus for the Interop 2026 initiative.

Key Insights

• CSS @keyframes names can be defined as strings, allowing identifiers like ‘@animation’ as shared by Peter Kröner (2026).
• Style queries allow the use of ’=’ instead of ’:’ to evaluate specific computed values, as demonstrated by Temani Afif.
• Firefox 148 has graduated the shape() function to a baseline feature, removing its previous experimental flag requirement.
• The :heading pseudo-class combined with the pow() function enables cleaner, mathematical typescale logic in Safari Technology Preview 237.
• The border-shape property is currently being trialed in Chrome Canary, offering distinct functionality from corner-shape by supporting the shape() function.

Working Examples

Demonstration of using a string as a keyframe identifier.

@keyframes "@animation" { /* ... */ } #animate-this { animation: "@animation"; }

Using the equals symbol in style queries to evaluate computed values.

.Jay-Z { --Problems: calc(98 + 1); color: if(style(--Problems = 99): red; else: blueivy); }

Implementing cleaner typescale logic using the pow() function and :heading.

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

Practical Applications

• Implement declarative
  elements using invoker commands to eliminate manual JavaScript toggle logic in modern browsers.
• Use relative color syntax to manage complex variable systems instead of maintaining large sets of static color definitions.
• Utilize modern.css snippets to replace legacy 2015-era layouts with native container queries and scroll-state keywords like ‘scrolled’.
• Apply Flexbox-based middle truncation for long strings until a native ::highlight() solution is standardized.

References:

• https://css-tricks.com/whats-important-6/