People say it’s been a sleepy couple of weeks for new web platform features, but honestly? It’s never sleepy when the roadmap for the entire year just dropped. Modern CSS features are moving from “experimental hacks” to “baseline reality” faster than most WordPress devs can keep up with. Between Interop 2026 announcements and new pseudo-classes hitting Safari, we’re looking at a year where we can finally delete some of our clunkiest JavaScript workarounds.
The Interop 2026 Roadmap: No More “It Works in Chrome”
If you’ve ever had a client call you because their checkout looks broken specifically on a three-year-old iPhone, you know the pain of browser inconsistency. Chrome, Safari, and Firefox just announced their targets for Interop 2026. Specifically, they are focusing on making high-demand features like @property and container queries behave the same way everywhere.
For me, this is the real news. I’ve spent way too many hours debugging race conditions in ResizeObserver just to simulate what container queries do natively. Consistency is the ultimate feature. If you want to see how we’re already moving away from heavy abstractions, check out my thoughts on Tailwind components vs utilities.
Style Queries: The Difference Between : and =
Temani Afif recently highlighted a subtle but critical distinction in style queries. Most developers use the colon (:) for literal matching, but using the equals sign (=) allows the browser to evaluate the actual computed value of a variable. This is huge when you’re dealing with calc() results or relative units in your WordPress theme’s theme.json.
/* Literal match - fails if --Problems is calc(98 + 1) */
@container style(--Problems: 99) {
.element { color: red; }
}
/* Computed match - works even if it's a calc() result */
@container style(--Problems = 99) {
.element { color: green; }
}Middle Truncation Without the JS Bloat
I once had a client who insisted that their WooCommerce product filenames had to be truncated from the middle (e.g., very-long-product-name...final.jpg). At the time, I had to reach for a messy Regex-based JS snippet that felt like overkill. Now, thanks to some clever Flexbox tricks shared by Wes Bos and potential native support for ::highlight(), we’re getting closer to a CSS-only solution.
While the native text-overflow: middle-ellipsis is still an open ticket on the W3C draft, these workarounds are much lighter than the legacy scripts we used to ship. This is part of a larger trend of modern CSS patterns replacing outdated performance-killing hacks.
Declarative Dialogs and the Death of jQuery Modals
One of the most exciting modern CSS features (and HTML enhancements) is the Invoker Commands API. It allows you to open a modal <dialog> without writing a single line of JavaScript. You just use the commandfor attribute on your button. This is native, accessible, and works in all modern browsers as of recently.
<button commandfor="my-modal" command="show-modal">Open Modal</button>
<dialog id="my-modal">
<p>No JavaScript required!</p>
<form method="dialog">
<button>Close</button>
</form>
</dialog>Smarter Typescales with :heading
Safari Technology Preview 237 just started trialing the :heading pseudo-class. Instead of writing h1, h2, h3, h4, h5, h6 { ... }, you can just use :heading. Combined with the pow() function, we can build mathematically perfect typographic scales in just a few lines of CSS. I’m already looking at how to integrate this into my Gutenberg block CSS strategies.
Look, if this modern CSS features stuff is eating up your dev hours, let me handle it. I’ve been wrestling with WordPress since the 4.x days, and I know exactly which “new” features are safe to use in production and which will break your layout on legacy browsers.
The Takeaway: Stop Writing CSS Like It’s 2015
The web platform is maturing. We’re moving away from needing a library for every minor UI interaction. Whether it’s border-shape giving us better control over component corners or style queries allowing for more reactive themes, the goal is the same: cleaner code and better performance. Don’t get distracted by the shiny stuff—focus on the features that solve your actual bottlenecks.
