CSS Weekly Roundup SVG Favicons, @mixin, Anchor-Interpolated Morphing, and More

What's New in CSS This Week?

If you blinked, you might have missed a wave of fresh CSS proposals, browser releases, and practical tutorials. Here's a quick snapshot of the most impactful updates for web developers.

SVG Favicons That Respect Color Scheme

Paweł Grzybek demonstrated how to serve SVG favicons that adapt to light/dark mode using prefers-color-scheme media queries inside the SVG itself. While the concept is elegant, browser support remains inconsistent. The community is pushing for a standardized approach. See the original article on CSS-Tricks for the full breakdown.

@mixin in CSS – Help Shape the Spec

Lea Verou shared a code snippet and asked the community for feedback on CSS mixin syntax. The goal is to make reusable style blocks as natural as they are in Sass, but without a preprocessor. The CSS Working Group is actively seeking developer input.

/* Proposed CSS @mixin syntax (not final) */
@mixin responsive-card($min-width: 300px) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  & > * {
    flex: 1 1 $min-width;
  }
}

.card-container {
  @include responsive-card(250px);
}

Anchor-Interpolated Morphing (AIM) – Tutorial

Chris Coyier published a tutorial on building an image gallery using popovers and AIM. This technique animates an element from its starting position to an anchored position, creating smooth transitions without JavaScript animation libraries.

object-view-box – Native CSS Image Cropping

Victor Ponamariov reminded us about object-view-box, a property that lets you zoom, crop, or frame an element like SVG's viewBox. Chrome has supported it since August 2022, but Safari and Firefox have yet to implement it.

/* Crop an image using object-view-box */
.cropped-image {
  object-view-box: inset(10% 20% 30% 40%);
}

corner-shape for Everyday UI

Brecht De Ruyte explored how corner-shape can be used in practical components like cards, buttons, and badges. Currently only supported in Chrome, it allows you to create rounded, beveled, or scooped corners with a single property.

Browser Release Highlights

• Firefox 149: popover=hint (also in Chrome), name-only containers (@container name { })
• Safari 26.4: name-only containers, display: grid-lanes, flow-tolerance
• Safari TP 240: additional grid improvements
• Chrome 148: at-rule feature queries; background-image now supports light-dark()

A new site called BaseWatch tracks baseline status for all these features.

Related: Check out our deep dive on "React's New Chapter: Moving to an Independent Foundation" for another major shift in the web ecosystem.

Deep Dive: Anchor-Interpolated Morphing with Popovers

Let's walk through a practical example of AIM. The idea is to animate a popover from the trigger element's position to a centered overlay.

<button popovertarget="gallery-popover">Open Gallery</button>

<div id="gallery-popover" popover>
  <img src="photo.jpg" alt="Gallery image" />
</div>

[popover] {
  /* Start from the button's position */
  position-anchor: --trigger;
  top: anchor(--trigger bottom);
  left: anchor(--trigger left);
  transition: top 0.3s, left 0.3s, transform 0.3s;
}

[popover]:popover-open {
  /* Morph to center */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This technique eliminates the need for JavaScript-driven animations and keeps the logic entirely in CSS.

Limitations & Caveats

• Browser support is fragmented. Many features (@mixin, corner-shape, object-view-box) are Chrome-only or behind flags.
• @mixin syntax is still in proposal stage. It may change significantly before reaching baseline.
• AIM relies on popover and anchor-positioning, which are not yet universally supported.
• SVG favicons with prefers-color-scheme do not work consistently across all browsers (e.g., Safari ignores them).

Next Steps for Learning

1. Experiment with object-view-box in Chrome to get comfortable with native cropping.
2. Follow the CSS @mixin GitHub discussion to contribute feedback.
3. Try building a small popover gallery using AIM to understand the animation flow.
4. Keep an eye on BaseWatch for when these features become baseline.

Final Thoughts

This week's CSS news shows that the platform is evolving rapidly. While many features are still experimental, the direction is clear: more power to CSS, less reliance on JavaScript for layout and interaction. Start playing with these features in Chrome today, and be ready for broader support in the coming months.

Also worth reading: "RCCLX by Meta: Revolutionizing GPU Communication for AMD Platforms" – a look at how Meta is changing the landscape for high-performance computing.