Brief n’ candy however ever so neat, this concern covers gentle/darkish favicons, @mixin, anchor-interpolated morphing, object-view-box, new net 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 gentle and darkish backgrounds, however not all logos may 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 conduct isn’t constant throughout net browsers. It’s an attention-grabbing 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, truthfully.
Skeuomorphic Egg Toggle Change [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
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 shocking 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 function 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? Properly, Frontend Masters have printed the tutorial for that too!
Bear in mind object-view-box? Me neither
CSS object-view-box permits a component to be zoomed, cropped, or framed in a approach 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 keep 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 net dev neighborhood, regardless of solely being supported by Chrome for now. It’s such a enjoyable function, providing so some ways to show packing containers into attention-grabbing shapes, however Brecht De Ruyte’s corner-shape article focuses extra on how we would 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 possibly can discover ways to grasp constructing the bones of internet sites utilizing an prolonged trial of the net growth browser, Polypane, which comes free with the course.
New net platform options
Firefox and Safari shipped new options (none baseline, sadly):
Additionally, Bramus mentioned that Chrome 148 can have at-rule function 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!
