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…
— FreeFrontend (@freefrontend.bsky.social) Mar 26, 2026 at 11:42
[image or embed]
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…
— Lea Verou, PhD (@lea.verou.me) Mar 26, 2026 at 23:29
[image or embed]
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.
— Victor (@vpon.me) Mar 24, 2026 at 16:15
[image or embed]
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-lanesandflow-tolerance
- Safari TP 240
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!
What’s !important #8: Light/Dark Favicons, @mixin, object-view-box, and More originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
from CSS-Tricks https://ift.tt/AdPLcrx
Gain $200 in a week
via Read more
