I have been building for the web long enough to remember when “theme switching” meant a fat JavaScript payload and half a dozen separate asset files. Most of that work is moving into the browser now. A few Modern CSS Features have caught my eye lately, mainly the ones that take dependencies out of how we handle favicons and image cropping.
Theme-aware assets and the native mixin proposal
I thought I had seen every way a logo can look bad in a dark-mode browser. The usual WordPress fix is to enqueue two versions of the asset or to patch SVG fills with JavaScript. Paweł Grzybek pointed out that an SVG favicon can respect the user’s color scheme inside the file itself, with no help from anywhere else. That is one of those Modern CSS Features that looks obvious the moment you see it, and browser consistency is still the catch.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #333; }
@media (prefers-color-scheme: dark) {
circle { fill: #f0f0f0; }
}
</style>
<circle cx="50" cy="50" r="40" />
</svg>Then there is the @mixin proposal. Lea Verou is consulting the community on how native CSS mixins should behave. Anyone who has spent a decade in Sass knows what mixins do for keeping a stylesheet DRY. Getting them in the browser would cut a lot of build-step complexity out of large WordPress themes.
Why we forgot about object-view-box
object-view-box is the most underused of these Modern CSS Features. Chrome shipped it in 2022 and it still barely comes up. It crops and zooms replaced elements, images and video included, with no wrapper <div> and no overflow: hidden. We looked earlier this year at which Modern CSS Features are becoming baseline safe, and this one belongs on that list.
/* Cropping an image natively without a container */
.profile-crop {
object-view-box: inset(10% 20% 15% 5%);
width: 300px;
height: 300px;
object-fit: cover;
}That helps DOM depth, and every decorative wrapper div you delete is one less node for the renderer to walk. Safari and Firefox have not shipped it yet, so treat it as progressive enhancement rather than a plan. On the same theme, we wrote about the CSS corner-shape property replacing complex clip-path hacks.
Morphing and the latest browser releases
Chris Coyier walked through Anchor-Interpolated Morphing (AIM), which handles the “fly-out” animation in an image gallery using popovers and anchor positioning. Firefox 149 and Safari 26.4 are also shipping name-only container queries, so responsive component code gets a lot less verbose.
If these Modern CSS Features are eating your dev hours, hand it over. I have been building on WordPress since the 4.x days.
Where this leaves your stack
Styling is drifting toward a “no-build” setup. Mixins, cropping through the MDN docs for object-view-box, and theme preference handling are all turning into browser features. So the practical move is to take things out of the stack instead of adding them. Every hack you swap for a native property is less JavaScript on the wire and less code you have to keep alive.
