Short n’ sweet but ever so neat, this issue covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more.

SVG favicons that respect the color scheme

I’m a sucker for colorful logos with about 50% lightness that look awesome on light and dark backgrounds, but not all logos can be like that. Paweł Grzybek showed us how to implement SVG favicons that respect the color scheme, enabling us to display favicons conditionally, but the behavior isn’t consistent across web browsers. It’s an interesting read and there appears to be a campaign to get it working correctly.

And once that happens, here’s a skeuomorphic egg-themed CSS toggle that I found last week. Perfect timing, honestly.

Skeuomorphic Egg Toggle Switch [HTML + CSS + JS] Organic mechanics. Complex box-shadow layering and border-radius manipulation. Tactile feedback through depth. Source code: freefrontend.com/code/skeuomo…

[image or embed]

— FreeFrontend (@freefrontend.bsky.social) Mar 26, 2026 at 11:42

Help the CSS WG shape @mixin

It seems that @mixin is taking a step forward. Lea Verou showed us a code snippet and asked what we think of it.

🚨 Want mixins in CSS? Help the CSS WG by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would *you* find least surprising for each of div, div > h2, div + p? Polls: ┣ Github: github.com/LeaVerou/blo… ┗ Mastodon: front-end.social/@leaverou/11…

[image or embed]

— Lea Verou, PhD (@lea.verou.me) Mar 26, 2026 at 23:29

Anchor-interpolated morphing tutorial

Chris Coyier showed us how to build an image gallery using popovers and something called AIM (Anchor-Interpolated Morphing). I’m only hearing about this now but Adam Argyle talked about AIM back in January. It’s not a new CSS feature but rather the idea of animating something from its starting position to an anchored position. Don’t miss this one.

Also, do you happen to remember Temani’s demo that I shared a few weeks ago? Well, Frontend Masters have published the tutorial for that too!

Remember object-view-box? Me neither

CSS object-view-box allows an element to be zoomed, cropped, or framed in a way that resembles how SVG’s viewBox works, but since Chrome implemented it back in August 2022, there’s been no mention of it. To be honest, I don’t remember it at all, which is a shame because it sounds useful. In a Bluesky thread, Victor Ponamariov explains how object-view-box works. Hopefully, Safari and Firefox implement it soon.

Wouldn't it be great to have native image cropping in CSS? It actually exists: object-view-box.

[image or embed]

— Victor (@vpon.me) Mar 24, 2026 at 16:15

corner-shape for everyday UI elements

Much has been said about CSS corner-shape, by us and the wider web dev community, despite only being supported by Chrome for now. It’s such a fun feature, offering so many ways to turn boxes into interesting shapes, but Brecht De Ruyte’s corner-shape article focuses more on how we might use corner-shape for everyday UI elements/components.

The Layout Maestro

Ahmad Shadeed’s course — The Layout Maestro — teaches you how to plan and build CSS layouts using modern techniques. Plus, you can learn how to master building the bones of websites using an extended trial of the web development browser, Polypane, which comes free with the course.

New web platform features

Firefox and Safari shipped new features (none baseline, sadly):

• Firefox 149
  • popover=hint (also supported by Chrome)
  • Name-only containers (e.g., @container name { })
• Safari 26.4
  • Name-only containers (as above)
  • display: grid-lanes and flow-tolerance
• Safari TP 240
  • revert-rule

Also, Bramus said that Chrome 148 will have at-rule feature queries, while Chrome 148 and Firefox 150 will allow background-image to support light-dark(). In any case, there’s a new website called BaseWatch that tracks baseline status for all of these CSS features.

Ciao!