Brief n’ candy however ever so neat, this problem covers mild/darkish favicons, @mixin, anchor-interpolated morphing, object-view-box, new internet options, and extra.
SVG favicons that respect the colour scheme
I’m a sucker for colourful logos with about 50% lightness that look superior on mild and darkish backgrounds, however not all logos will be like that. Paweł Grzybek confirmed us tips on how to implement SVG favicons that respect the colour scheme, enabling us to show favicons conditionally, however the habits isn’t constant throughout internet browsers. It’s an fascinating learn and there seems to be a marketing campaign to get it working appropriately.
And as soon as that occurs, right here’s a skeuomorphic egg-themed CSS toggle that I discovered final week. Good timing, actually.
Skeuomorphic Egg Toggle Swap [HTML + CSS + JS]
Natural mechanics. Advanced box-shadow layering and border-radius manipulation. Tactile suggestions by way of depth. Supply code: freefrontend.com/code/skeuomo…
— FreeFrontend (@freefrontend.bsky.social) Mar 26, 2026 at 11:42
Assist the CSS WG form @mixin
It appears that evidently @mixin is taking a step ahead. Lea Verou confirmed us a code snippet and requested what we consider it.
🚨 Need mixins in CSS? Assist the CSS WG by telling us what feels pure to you! Take a look at the code within the screenshot. What ensuing widths would *you* discover least stunning for every 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
Anchor-interpolated morphing tutorial
Chris Coyier confirmed us tips on how to construct a picture gallery utilizing popovers and one thing referred to as AIM (Anchor-Interpolated Morphing). I’m solely listening to about this now however Adam Argyle talked about AIM again in January. It’s not a brand new CSS characteristic however somewhat the concept of animating one thing from its beginning place to an anchored place. Don’t miss this one.
Additionally, do you occur to recollect Temani’s demo that I shared just a few weeks in the past? Effectively, Frontend Masters have revealed the tutorial for that too!
Keep in mind object-view-box? Me neither
CSS object-view-box permits a component to be zoomed, cropped, or framed in a manner that resembles how SVG’s viewBox works, however since Chrome applied it again in August 2022, there’s been no point out of it. To be trustworthy, I don’t bear in mind it in any respect, which is a disgrace as a result of it sounds helpful. In a Bluesky thread, Victor Ponamariov explains how object-view-box works. Hopefully, Safari and Firefox implement it quickly.
Would not or not it’s nice to have native picture cropping in CSS? It really exists: object-view-box.
— Victor (@vpon.me) Mar 24, 2026 at 16:15
corner-shape for on a regular basis UI parts
A lot has been mentioned about CSS corner-shape, by us and the broader internet dev group, regardless of solely being supported by Chrome for now. It’s such a enjoyable characteristic, providing so some ways to show containers into fascinating shapes, however Brecht De Ruyte’s corner-shape article focuses extra on how we’d use corner-shape for on a regular basis UI parts/elements.
The Structure Maestro
Ahmad Shadeed’s course — The Structure Maestro — teaches you tips on how to plan and construct CSS layouts utilizing trendy strategies. Plus, you may learn to grasp constructing the bones of internet sites utilizing an prolonged trial of the online improvement browser, Polypane, which comes free with the course.
New internet platform options
Firefox and Safari shipped new options (none baseline, sadly):
Additionally, Bramus mentioned that Chrome 148 could have at-rule characteristic queries, whereas Chrome 148 and Firefox 150 will enable background-image to help light-dark(). In any case, there’s a brand new web site referred to as BaseWatch that tracks baseline standing for all of those CSS options.
Ciao!
