CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 11-2026
article
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
TAG: DEEP DIVE
The new CSS corner-shape property works as a companion to border-radius, modifying the shape of corners rather than replacing radius values — enabling bevel, scoop, notch, squircle, and the fine-grained superellipse() function. As of Chrome 139+, it already affects outlines, box shadows, and backgrounds, something clip-path could never do. Author Brecht De Ruyte structures five progressive-enhancement demos using CSS@layer and @supports (corner-shape: bevel), so browsers without support receive a polished baseline while supporting browsers gain the upgrade. Practical patterns include round bevel bevel round ribbon badges, scoop-corner pricing cards, and squircle app-icon avatars. The spec lives in CSS Borders and Box Decorations Module Level 4; Firefox and Safari support is still pending.
Un-Sass'ing My CSS: Native CSS Nesting Always Twisted
TAG: GUIDE
This practical guide covers native CSS nesting as it stands in all modern browsers in 2026, exploring where it diverges from Sass. When a parent has multiple selectors, the browser wraps them in :is(), which inherits the highest specificity from the list — a selector like .card, #featured {} causes nested children to carry ID-level specificity (1,1,0), a common debugging trap. The critical difference from Sass is that & is an object reference, not a string, so BEM-style concatenation like &--modifier is unsupported natively. The guide recommends nesting for pseudo-classes, media/container/feature queries, and prefers-reduced-motion overrides, while keeping BEM element selectors at the root level to avoid unnecessary specificity buildup.
Detect at-rule support in CSS with @supports at-rule(@keyword)
TAG: RELEASE
Chromium 148 ships @supports at-rule(@keyword), standardized in CSS Conditional Rules Module Level 5, allowing feature detection of CSS at-rules like @starting-style and @view-transition directly in stylesheets and @import conditions. The function checks whether the browser accepts the named at-rule in any context; you can also self-detect support via @supports at-rule(@supports). Importantly, descriptor-level queries, prelude detection, and full at-rule blocks were dropped from the spec — so detecting non-size container queries (style queries, anchored queries) requires workarounds like checking container-type values or a sentinel custom-property approach. Firefox (issue #1751188) and Safari (issue #235400) have not yet shipped support.
Patrick - Using CSS animations as state machines to remember focus and hover states with CSS only
TAG: TECHNIQUE
This technique exploits CSS animation's animation-fill-mode: forwards and animation-play-state properties to persist state without JavaScript. An element is given a near-instant animation (duration: .00001s) set to paused; when :focus or :hover fires, the play state switches to running, the animation completes instantly, and the fill-mode freezes it in the end state permanently. The approach works independently per element even when many share the same class. For composability, the author refactors it to toggle a --was-focused custom property via @keyframes, then reads that value with a @container style() query to conditionally apply any styles to descendants — effectively turning animation into a CSS-only if statement for persistent interaction state.
una.im | Automated accessible text with contrast-color()
TAG: TECHNIQUE
contrast-color() lands in Chrome 147 stable (end of March 2026), completing cross-browser availability in all modern browsers. The function takes any valid CSS color value and returns either black or white — whichever clears the WCAG 2 AA minimum contrast ratio of 4.5:1 against the input; ties resolve to white. This eliminates manual management of paired text colors in design systems: a single color: contrast-color(var(--brand-color)) declaration handles dynamic buttons, dark-mode body text via prefers-color-scheme, and algorithmically generated palettes using color-mix(). The current spec is intentionally constrained to black and white; a proposal to allow custom contrast targets like #222 was rejected to ensure guaranteed accessibility compliance.
Kevin Powell rounds up seven-plus practical CSS tips in this 14-minute video. Highlights include overscroll-behavior: contain to lock scroll chains within an element (with a caution about tall containers on touch devices), caret-color for branded input cursors, and the progressive-enhancement caret-shape property (Chrome-only at recording time, values: bar, block, underscore). accent-color lets you restyle checkboxes, radios, and range inputs in one inherited declaration with automatic high-contrast check-mark switching. The color-scheme property and the light-dark() function are covered for zero-effort dark-mode baseline styles, and place-content: center on a grid container is presented as the cleanest centering shorthand, alongside place-self on absolutely-positioned children.
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
The new CSS corner-shape property works as a companion to border-radius, modifying the shape of corners rather than replacing radius values — enabling bevel, scoop, notch, squircle, and the fine-grained superellipse() function. As of Chrome 139+, it already affects outlines, box shadows, and backgrounds, something clip-path could never do. Author Brecht De Ruyte structures five progressive-enhancement demos using CSS@layer and @supports (corner-shape: bevel), so browsers without support receive a polished baseline while supporting browsers gain the upgrade. Practical patterns include round bevel bevel round ribbon badges, scoop-corner pricing cards, and squircle app-icon avatars. The spec lives in CSS Borders and Box Decorations Module Level 4; Firefox and Safari support is still pending.
Kevin Powell rounds up seven-plus practical CSS tips in this 14-minute video. Highlights include overscroll-behavior: contain to lock scroll chains within an element (with a caution about tall containers on touch devices), caret-color for branded input cursors, and the progressive-enhancement caret-shape property (Chrome-only at recording time, values: bar, block, underscore). accent-color lets you restyle checkboxes, radios, and range inputs in one inherited declaration with automatic high-contrast check-mark switching. The color-scheme property and the light-dark() function are covered for zero-effort dark-mode baseline styles, and place-content: center on a grid container is presented as the cleanest centering shorthand, alongside place-self on absolutely-positioned children.
Un-Sass'ing My CSS: Native CSS Nesting Always Twisted
This practical guide covers native CSS nesting as it stands in all modern browsers in 2026, exploring where it diverges from Sass. When a parent has multiple selectors, the browser wraps them in :is(), which inherits the highest specificity from the list — a selector like .card, #featured {} causes nested children to carry ID-level specificity (1,1,0), a common debugging trap. The critical difference from Sass is that & is an object reference, not a string, so BEM-style concatenation like &--modifier is unsupported natively. The guide recommends nesting for pseudo-classes, media/container/feature queries, and prefers-reduced-motion overrides, while keeping BEM element selectors at the root level to avoid unnecessary specificity buildup.
Detect at-rule support in CSS with @supports at-rule(@keyword)
Chromium 148 ships @supports at-rule(@keyword), standardized in CSS Conditional Rules Module Level 5, allowing feature detection of CSS at-rules like @starting-style and @view-transition directly in stylesheets and @import conditions. The function checks whether the browser accepts the named at-rule in any context; you can also self-detect support via @supports at-rule(@supports). Importantly, descriptor-level queries, prelude detection, and full at-rule blocks were dropped from the spec — so detecting non-size container queries (style queries, anchored queries) requires workarounds like checking container-type values or a sentinel custom-property approach. Firefox (issue #1751188) and Safari (issue #235400) have not yet shipped support.
Patrick - Using CSS animations as state machines to remember focus and hover states with CSS only
This technique exploits CSS animation's animation-fill-mode: forwards and animation-play-state properties to persist state without JavaScript. An element is given a near-instant animation (duration: .00001s) set to paused; when :focus or :hover fires, the play state switches to running, the animation completes instantly, and the fill-mode freezes it in the end state permanently. The approach works independently per element even when many share the same class. For composability, the author refactors it to toggle a --was-focused custom property via @keyframes, then reads that value with a @container style() query to conditionally apply any styles to descendants — effectively turning animation into a CSS-only if statement for persistent interaction state.
una.im | Automated accessible text with contrast-color()
contrast-color() lands in Chrome 147 stable (end of March 2026), completing cross-browser availability in all modern browsers. The function takes any valid CSS color value and returns either black or white — whichever clears the WCAG 2 AA minimum contrast ratio of 4.5:1 against the input; ties resolve to white. This eliminates manual management of paired text colors in design systems: a single color: contrast-color(var(--brand-color)) declaration handles dynamic buttons, dark-mode body text via prefers-color-scheme, and algorithmically generated palettes using color-mix(). The current spec is intentionally constrained to black and white; a proposal to allow custom contrast targets like #222 was rejected to ensure guaranteed accessibility compliance.
CSS's expressiveness took another leap this week. The featured article on the corner-shape property (Chrome 139+) shows how a single companion to border-radius can unlock bevel, scoop, notch, and squircle corner geometries — and unlike clip-path, it correctly propagates to outlines, box shadows, and backgrounds. Brecht De Ruyte's progressive-enhancement approach using @layer and @supports ensures graceful fallback across browsers still awaiting Firefox and Safari support.
Accessibility and feature detection also moved forward. contrast-color() landed in Chrome 147 stable, finally giving design systems a one-declaration solution for WCAG 2-compliant text color pairing without any manual management. Meanwhile, Chromium 148 shipped @supports at-rule(@keyword), letting stylesheets detect support for at-rules like @starting-style and @view-transition natively. A practical guide to native CSS nesting clarified the :is()-specificity trap that catches developers migrating from Sass, and Patrick Brosset's animation-as-state-machine technique demonstrated how animation-fill-mode: forwards and container style queries can replace JavaScript for persistent hover and focus state memory.
Kevin Powell's quick tips rounded out the week with actionable nuggets: overscroll-behavior: contain, accent-color for form inputs, and place-content: center as the cleanest grid centering shorthand — small wins that collectively raise the bar for baseline CSS fluency.
Key Takeaways
corner-shape in Chrome 139+ enables bevel, scoop, notch, and squircle corners as a companion to border-radius, and correctly affects outlines and box shadows unlike clip-path.
contrast-color() is now cross-browser stable, automating WCAG 2 AA-compliant text color selection with a single CSS declaration.
Native CSS nesting's :is() specificity promotion and lack of BEM-style string concatenation are the two most important behavioral differences to internalize when migrating from Sass.
