What's !important #8: Light/Dark Favicons, @mixin, object-view-box, and More

March 31, 2026
5 min read
495 views

The CSS world is buzzing with developments that range from practical browser improvements to experimental features that could reshape how we build interfaces. Several emerging capabilities deserve attention from developers who want to stay ahead of the curve.

The Favicon Color Scheme Challenge

Paweł Grzybek recently explored SVG favicons that adapt to light and dark color schemes—a seemingly simple feature that reveals deeper browser inconsistencies. The concept is straightforward: your site's favicon should respect user preferences just like the rest of your interface. But implementation across browsers remains frustratingly uneven.

This matters more than it might seem. As dark mode becomes standard rather than novelty, these small visual details contribute to perceived polish. A favicon that looks washed out or invisible in dark mode creates an immediate impression of neglect. The technical solution exists—SVG favicons with embedded media queries—but standardization efforts are still underway.

The broader lesson here is about progressive enhancement. Developers can implement adaptive favicons now for browsers that support them, while others fall back to static versions. It's a low-risk way to improve user experience for a growing segment of users who default to dark interfaces.

CSS Mixins Move Toward Reality

Lea Verou's call for community input on @mixin syntax signals that this long-requested feature is progressing beyond theoretical discussion. The CSS Working Group is soliciting feedback on how developers expect mixins to behave when properties cascade and override each other.

For developers coming from Sass or Less, native CSS mixins represent a significant shift. Preprocessors have filled this gap for over a decade, but native support would eliminate build steps for many projects. The challenge lies in designing syntax that feels intuitive while respecting CSS's existing cascade rules—a balance that requires real-world input rather than committee speculation.

The practical impact extends beyond convenience. Native mixins could improve performance by reducing CSS file sizes and eliminating preprocessor overhead. They'd also lower the barrier for developers who find build tooling intimidating but need reusable style patterns.

Anchor-Interpolated Morphing Unlocks New Patterns

Chris Coyier's tutorial on building image galleries with popovers introduces Anchor-Interpolated Morphing (AIM)—not a new CSS property, but a technique combining existing features in clever ways. The approach animates elements from their starting position to an anchored target, creating smooth transitions that feel native rather than scripted.

What makes AIM significant is its reliance on CSS anchor positioning, a feature that's gaining traction after years of JavaScript-heavy alternatives. Developers have long used libraries to position tooltips, dropdowns, and overlays relative to trigger elements. Anchor positioning handles this natively, and AIM extends the concept to animated transitions.

The technique works particularly well for image galleries, modal dialogs, and expanding card interfaces—patterns that previously required complex JavaScript state management. By leveraging CSS capabilities, developers can achieve smoother animations with less code and better performance. Adam Argyle's January writeup provides deeper technical context for those ready to experiment.

Forgotten Features Worth Revisiting

object-view-box shipped in Chrome back in August 2022, yet it's barely penetrated developer consciousness. The property allows precise control over how images are cropped and framed, similar to SVG's viewBox attribute but applicable to any replaced element.

Victor Ponamariov's recent explanation highlights why this matters. Current image cropping typically requires either server-side processing or CSS tricks with object-fit and object-position. object-view-box provides finer control with simpler syntax, letting developers specify exactly which portion of an image to display.

The lack of Firefox and Safari support explains the feature's obscurity. Developers can't rely on properties that work in only one browser engine. But as Safari implements more modern CSS features and Firefox catches up, object-view-box deserves a spot on your radar for future projects.

Corner Shapes Beyond Novelty

CSS corner-shape has generated excitement for its ability to create squircles, bevels, and notched corners without SVG or complex clip paths. Brecht De Ruyte's recent article shifts focus from experimental demos to practical UI applications—buttons, tags, badges, and navigation elements that benefit from non-standard corner treatments.

The property's real value emerges in design systems that need consistent, distinctive shapes across components. A notification badge with scooped corners or a button with beveled edges can reinforce brand identity without requiring image assets. This reduces HTTP requests and makes components easier to maintain.

Chrome-only support currently limits production use, but the pattern is familiar: experimental features gain traction through demos and articles, other browsers implement them, and eventually they reach baseline status. Developers who understand corner-shape now will be ready when broader support arrives.

Tracking the Baseline

Firefox 149 and Safari 26.4 both shipped name-only container queries, allowing @container name { } syntax without explicit size conditions. This seemingly minor improvement simplifies code and makes container queries more flexible for complex layouts.

Safari's implementation of display: grid-lanes represents progress on masonry layouts, a contentious topic in CSS standardization. Meanwhile, upcoming Chrome and Firefox versions will extend light-dark() function support to background images, making theme switching more comprehensive.

BaseWatch, a new tracking site for CSS baseline status, addresses a real pain point. Developers need quick answers about which features work across browsers, not just which browsers support individual properties. As CSS evolves faster, tools that aggregate compatibility data become essential for making informed implementation decisions.

The pace of CSS development shows no signs of slowing. Features that seemed experimental last year are reaching baseline status, while new proposals enter the discussion. Staying current requires following multiple sources, testing in different browsers, and understanding which features solve real problems versus which are merely interesting experiments.

Comments

Sign in to comment.
No comments yet. Be the first to comment.

Sign out

Are you sure you want to sign out?