I was auditing a client’s WooCommerce site last week—standard stuff, or so I thought. They were complaining about weird input jumping on mobile and a massive JavaScript bundle that seemed to do nothing but manage form field heights. When I looked under the hood, I found a tangled mess of ResizeObserver logic just to make a textarea grow with its content. It was brittle, it felt sluggish, and it was a total nightmare to maintain.
My first instinct? I tried to refactor the Modern CSS Features in their JS helper, thinking I could just optimize the debounce logic. That was a mistake. I spent an hour fighting race conditions before realizing I was solving a problem that doesn’t even exist anymore. I should have just deleted the code. With the latest web platform updates, we can now handle these “complex” UI behaviors natively, and it’s honestly a relief to see how much bloat we can drop.
Ditching JavaScript for Native Solutions
One of the biggest wins this year is field-sizing: content. For years, we’ve used heavy libraries to make inputs auto-expand. Now, it’s a single line of CSS. If you’re still writing JS for this, you’re just adding technical debt. Chizaram Ken recently wrote about reducing reliance on JavaScript, and he’s spot on. The browser is getting smarter; our code should get leaner.
This shift isn’t just about input fields. Features like ::target-text allow us to style text fragments linked directly from search engines or shared URLs. As WebKit pointed out, this is supported across all major browsers now. It’s a tiny detail, but it’s these native implementations that make a site feel “fast” versus just “functional.”
The Power of Scoped Styling
The real highlight for me—the thing that’s going to change how we build WordPress themes—is @scope. I’ve written before about how WordPress development can break your CSS when global styles collide. @scope finally gives us a native way to isolate styles to a specific DOM subtree without the overhead of Shadow DOM or the specificity wars of BEM.
/* bbioon-theme scoped styling example */
@scope (.bbioon-product-card) {
:scope {
border: 1px solid #eee;
padding: 1rem;
}
img {
border-radius: 8px;
/* This only affects images inside the card */
}
}In the WordPress world, where we’re constantly mixing core blocks with custom components, this is huge. It solves the “z-index” and “specificity” hacks we’ve all been guilty of at 3 AM. If you’re struggling with styles leaking where they shouldn’t, this is the fix. For more on this, check out my thoughts on modern CSS beyond JS bloat.
New Browser Toys: Invokers and Contrast
We’re also seeing baseline support for Invoker Commands (command and commandfor). This is a game-changer for accessibility and performance. You can now toggle dialogs and popovers without a single line of JS event listener. It’s declarative, it’s fast, and it’s built-in. Pair that with the HTMHell Advent Calendar insights, and you’ll realize how much “standard” HTML we’ve been ignoring in favor of complex frameworks.
Look, I get it. We’ve spent a decade learning how to solve everything with JavaScript because we had to. But the web has moved on. If your site feels heavy or your CSS is a 5,000-line mess of !important, it’s probably because you’re fighting the platform instead of using it.
Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work using modern standards, drop me a line. I’ve probably seen it before and, more importantly, I know exactly what to delete.
The Bottom Line
- field-sizing: Use it to kill auto-growing input JS.
- @scope: Use it to stop CSS specificity wars in custom blocks.
- Invoker Commands: Use them for native dialog and popover control.
- ::target-text: A subtle way to improve the user experience for shared links.
Greetings! I’ve been following your web site for a while now and finally got the bravery to go ahead and give you a shout out from Porter Texas! Just wanted to tell you keep up the excellent job!
Thank you, Johnny.
Happy to hear you like my writings 🎉