Browser releases and CSS specs are landing new capabilities faster than most of us can refactor the code we already have. Every time I open a Canary build there seems to be another keyword that makes a dozen lines of JavaScript pointless. The latest batch of Modern CSS Features closes most of what was left of the gap between the browser and the UI libraries we lean on.
Clip-path and the end of SVG hacks
I remember clip-path as a niche tool, something you reached for when a client insisted on a header that was not a rectangle. Amit Sheen recently pushed it about as far as it goes and built a working jigsaw puzzle in CSS alone. Chrome Canary also shipped rounded polygons, so a smooth corner on a custom shape no longer means hand-editing an SVG path.
/* The future of rounded polygons in Modern CSS Features */
.jigsaw-piece {
clip-path: polygon(
evenodd,
0% 0% round 10px,
100% 0%,
100% 100%,
0% 100%
);
}If simple UI masking in your project still means shipping SVG assets, that is a maintenance cost you are choosing. I wrote about keeping stylesheets manageable in my guide to alternatives to !important.
View transitions without a framework
The Chrome DevRel team put out a toolkit that takes most of the friction out of the View Transitions API. Element-scoped transitions are the part I care about: you animate one region of the DOM through a state change instead of reloading the page. That gets you the app-like feel without dragging in an SPA framework for it.
I have already shared some CSS View Transitions API recipes you can drop straight into a WordPress project. For a plain view swap, the native version runs better than what we used to build with Framer Motion or GSAP.
Subgrid and the death of wrapper hell
subgrid is the one of these Modern CSS Features I see used least. It has been baseline for two years and developers are still building “Michael Scofield” layouts out of nested wrappers and negative margins. A child element can inherit its parent’s grid tracks, which takes the guesswork out of aligning things across nesting levels.
.parent-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-card {
grid-column: span 4;
display: grid;
grid-template-columns: subgrid; /* Child now uses the 12-col grid */
}There is a related argument going on about name-only containers versus @scope. Name-only containers are the quicker way to scope styles. @scope leaves cleaner HTML behind and follows the cascade as it already works. I use @scope, mostly because it keeps class names from multiplying over the life of a project.
If this Modern CSS Features stuff is eating your dev hours, I can take it on. I have been wrestling with WordPress since the 4.x days.
What to do with this
JavaScript is turning into the fallback for UI logic rather than the first thing you reach for. Between clip-path, subgrid and native @scope, the browser now handles work we used to import a library for. Pick one of those libraries in your next refactor and check whether a native feature already covers it.
