CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 19-2026
article
Tailwind CSS v4.3: Scrollbars, New Colors, and More
TAG: FRAMEWORK
Tailwind CSS v4.2 and v4.3 arrive together in one blog post, covering two releases worth of additions. v4.2 introduced four new neutral-adjacent color palettes (mauve, olive, mist, taupe), a first-class webpack plugin that cuts build times more than 2x compared to the PostCSS path, expanded logical property utilities (pbs-*, mbs-*, inline-size, block-size, inset-s-*, inset-e-*), and font-features-* utilities for controlling font-feature-settings. v4.3 adds scrollbar utilities covering scrollbar-width (scrollbar-auto, scrollbar-thin, scrollbar-none), scrollbar-color (scrollbar-thumb-*, scrollbar-track-*), and scrollbar-gutter; a new @container-size utility creating size containers for cqb/cqh units; zoom-* utilities for the now-baseline CSS zoom property; tab-* utilities for tab-size; stacked and compound @variant support in CSS; and default values for functional @utility definitions via --default().
Ahmad Shadeed makes a practical case for switching from min-width/max-width media queries to the Media Queries Level 4 range syntax today. The classic approach causes a subtle bug: when both a max-width: 300px and a min-width: 300px rule target the same breakpoint, both conditions are simultaneously true and elements can disappear together. The range syntax replaces this ambiguity with readable comparison operators — width <= 300px and width > 300px — eliminating the need to manually offset values by 1px. For double-bounded ranges, (300px <= width <= 500px) collapses two separate and-chained queries into a single expression. The same syntax works with @container queries by swapping @media for @container. Browser support has been Baseline-stable since March 2023, making it safe to ship today.
Doing Maths in CSS: Trigonometric Functions for Layout and Animation
TAG: ANIMATION
CSS has supported sin(), cos(), and atan2() since 2023 (Baseline, Chrome 111+, Firefox 108+, Safari 15.4+), enabling circle, arc, spiral, and pointer layouts without JavaScript. The core pattern uses a per-element --angle custom property fed through cos() and sin() to drive translate offsets from a container center. For rotation animations, the container spins forward while each child counter-rotates via animation-delay and the reverse keyword, keeping dots visually upright. Transitioning --angle directly requires @property with syntax: angle; without the type registration the browser silently ignores the interpolation. The same --i index variable that positions elements also drives animation-delay for staggered entrances (calc(var(--i) * 80ms)) and color via hsl(). For arc navigation, a start/end angle pair replaces the full circle, and atan2(-y, -x) makes elements face inward; a single mousemove listener feeding --mx/--my lets CSS compute twelve rotation angles client-side.
CSS - The Single Coolest API Technique You Can Imagine
TAG: CSS TRICKS
The article introduces Cyclic Space Toggles, an extension of the Space Toggle technique that upgrades binary on/off CSS custom property hacks into N-state selectors. A standard Space Toggle exploits the fact that a custom property set to a space character is truthy (blocks the var() fallback) while initial is falsey (IACVT — Invalid At Computed Value Time), allowing conditional property application. Cyclic Space Toggles chain multiple inverted toggles so that setting a single --select variable to a combination of --option-* references flips exactly those options to initial while leaving the rest as spaces. The result is a boolean-only shorthand API: CSS library consumers can activate multiple feature flags in a single declaration (--bp-fluidity: var(--fluid-xxs) var(--fluid-sm) var(--fluid-lg)). The author demonstrates real-world use in their breakpoint-system library and sketches how Tailwind class lists could be replaced with a cyclic-toggle-backed CSS API. Global browser reach is cited at approximately 95-97%.
Using safe-area-inset to Build Mobile-Safe Layouts
TAG: MOBILE
Modern smartphones expose notches, dynamic islands, camera punch holes, and home indicator gesture areas that can obscure fixed UI elements. Browsers surface these measurements through the env() CSS function as safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, and safe-area-inset-left — all Baseline widely available. To get full edge-to-edge rendering you must first opt in with viewport-fit=cover in the meta viewport tag, then apply env() values to padding or positioning. Because these insets provide zero margin by default, use calc(env(safe-area-inset-bottom) + 1rem) for breathing room. The article also covers safe-area-max-inset-*, a newer Chromium-only variant that holds a stable reserved zone even when the browser chrome collapses — useful for persistent cookie banners and dialogs but not yet supported in Safari or Firefox. Chrome DevTools responsive view always reports 0, so the article recommends Polypane, which emulates correct per-device inset values in both portrait and landscape.
Remy Sharp documents a security-adjacent UX bug that arises from using the HTML popover attribute with ::backdrop to build modal-looking overlays instead of the dialog element. A popover does not trap focus or pointer events, meaning clicks on the ::backdrop visually dismiss the overlay but actually pass through to whatever sits beneath it in the DOM. Sharp demonstrates this with a clickjacking-style demo: a full-screen hidden button placed behind the popover fires when the user clicks away to dismiss. The correct fix is to use a dialog element, whose ::backdrop traps clicks entirely. Sharp also questions whether popover should expose ::backdrop at all given the semantic mismatch, noting that a solid or blurred backdrop implies modal intent that popover cannot enforce. A Firefox bug with solid backdrop backgrounds is filed.
Frontend Developer Takes on CSS Battles - 10-Minute Challenge
Kevin Powell works through three CSS Battle challenges (251, 252, 253) under a self-imposed 10-minute timer, narrating his real-time decision-making. Challenge 251 uses stacked divs with border-radius: 100vw on the top two corners and a pseudo-element for a decorative stripe, centering via margin-inline: auto and reaching 100% match in about 5:40. Challenge 252 builds concentric circles using box-shadow spread layers (0 0 0 20px, 0 0 0 50px, 0 0 0 70px) on a single div with a half-height ::after for a flat-cut effect, scoring 99.9%. Challenge 253 uses a single div with a two-sided transparent border (border-top-color and border-bottom-color set, sides transparent) and rotate: -45deg to form a diamond shape, with four positioned pseudo-elements on body and html for the end-cap circles, reaching 100% at 7:58. Powell highlights border-box sizing subtleties, the no-trailing-comma rule in box-shadow shorthand, and reflects on how inset with margin-inline auto would have been cleaner than manual left offsets.
Tailwind CSS v4.3: Scrollbars, New Colors, and More
Tailwind CSS v4.2 and v4.3 arrive together in one blog post, covering two releases worth of additions. v4.2 introduced four new neutral-adjacent color palettes (mauve, olive, mist, taupe), a first-class webpack plugin that cuts build times more than 2x compared to the PostCSS path, expanded logical property utilities (pbs-*, mbs-*, inline-size, block-size, inset-s-*, inset-e-*), and font-features-* utilities for controlling font-feature-settings. v4.3 adds scrollbar utilities covering scrollbar-width (scrollbar-auto, scrollbar-thin, scrollbar-none), scrollbar-color (scrollbar-thumb-*, scrollbar-track-*), and scrollbar-gutter; a new @container-size utility creating size containers for cqb/cqh units; zoom-* utilities for the now-baseline CSS zoom property; tab-* utilities for tab-size; stacked and compound @variant support in CSS; and default values for functional @utility definitions via --default().
Frontend Developer Takes on CSS Battles - 10-Minute Challenge
Kevin Powell works through three CSS Battle challenges (251, 252, 253) under a self-imposed 10-minute timer, narrating his real-time decision-making. Challenge 251 uses stacked divs with border-radius: 100vw on the top two corners and a pseudo-element for a decorative stripe, centering via margin-inline: auto and reaching 100% match in about 5:40. Challenge 252 builds concentric circles using box-shadow spread layers (0 0 0 20px, 0 0 0 50px, 0 0 0 70px) on a single div with a half-height ::after for a flat-cut effect, scoring 99.9%. Challenge 253 uses a single div with a two-sided transparent border (border-top-color and border-bottom-color set, sides transparent) and rotate: -45deg to form a diamond shape, with four positioned pseudo-elements on body and html for the end-cap circles, reaching 100% at 7:58. Powell highlights border-box sizing subtleties, the no-trailing-comma rule in box-shadow shorthand, and reflects on how inset with margin-inline auto would have been cleaner than manual left offsets.
Ahmad Shadeed makes a practical case for switching from min-width/max-width media queries to the Media Queries Level 4 range syntax today. The classic approach causes a subtle bug: when both a max-width: 300px and a min-width: 300px rule target the same breakpoint, both conditions are simultaneously true and elements can disappear together. The range syntax replaces this ambiguity with readable comparison operators — width <= 300px and width > 300px — eliminating the need to manually offset values by 1px. For double-bounded ranges, (300px <= width <= 500px) collapses two separate and-chained queries into a single expression. The same syntax works with @container queries by swapping @media for @container. Browser support has been Baseline-stable since March 2023, making it safe to ship today.
Doing Maths in CSS: Trigonometric Functions for Layout and Animation
CSS has supported sin(), cos(), and atan2() since 2023 (Baseline, Chrome 111+, Firefox 108+, Safari 15.4+), enabling circle, arc, spiral, and pointer layouts without JavaScript. The core pattern uses a per-element --angle custom property fed through cos() and sin() to drive translate offsets from a container center. For rotation animations, the container spins forward while each child counter-rotates via animation-delay and the reverse keyword, keeping dots visually upright. Transitioning --angle directly requires @property with syntax: angle; without the type registration the browser silently ignores the interpolation. The same --i index variable that positions elements also drives animation-delay for staggered entrances (calc(var(--i) * 80ms)) and color via hsl(). For arc navigation, a start/end angle pair replaces the full circle, and atan2(-y, -x) makes elements face inward; a single mousemove listener feeding --mx/--my lets CSS compute twelve rotation angles client-side.
CSS - The Single Coolest API Technique You Can Imagine
The article introduces Cyclic Space Toggles, an extension of the Space Toggle technique that upgrades binary on/off CSS custom property hacks into N-state selectors. A standard Space Toggle exploits the fact that a custom property set to a space character is truthy (blocks the var() fallback) while initial is falsey (IACVT — Invalid At Computed Value Time), allowing conditional property application. Cyclic Space Toggles chain multiple inverted toggles so that setting a single --select variable to a combination of --option-* references flips exactly those options to initial while leaving the rest as spaces. The result is a boolean-only shorthand API: CSS library consumers can activate multiple feature flags in a single declaration (--bp-fluidity: var(--fluid-xxs) var(--fluid-sm) var(--fluid-lg)). The author demonstrates real-world use in their breakpoint-system library and sketches how Tailwind class lists could be replaced with a cyclic-toggle-backed CSS API. Global browser reach is cited at approximately 95-97%.
Using safe-area-inset to Build Mobile-Safe Layouts
Modern smartphones expose notches, dynamic islands, camera punch holes, and home indicator gesture areas that can obscure fixed UI elements. Browsers surface these measurements through the env() CSS function as safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, and safe-area-inset-left — all Baseline widely available. To get full edge-to-edge rendering you must first opt in with viewport-fit=cover in the meta viewport tag, then apply env() values to padding or positioning. Because these insets provide zero margin by default, use calc(env(safe-area-inset-bottom) + 1rem) for breathing room. The article also covers safe-area-max-inset-*, a newer Chromium-only variant that holds a stable reserved zone even when the browser chrome collapses — useful for persistent cookie banners and dialogs but not yet supported in Safari or Firefox. Chrome DevTools responsive view always reports 0, so the article recommends Polypane, which emulates correct per-device inset values in both portrait and landscape.
Remy Sharp documents a security-adjacent UX bug that arises from using the HTML popover attribute with ::backdrop to build modal-looking overlays instead of the dialog element. A popover does not trap focus or pointer events, meaning clicks on the ::backdrop visually dismiss the overlay but actually pass through to whatever sits beneath it in the DOM. Sharp demonstrates this with a clickjacking-style demo: a full-screen hidden button placed behind the popover fires when the user clicks away to dismiss. The correct fix is to use a dialog element, whose ::backdrop traps clicks entirely. Sharp also questions whether popover should expose ::backdrop at all given the semantic mismatch, noting that a solid or blurred backdrop implies modal intent that popover cannot enforce. A Firefox bug with solid backdrop backgrounds is filed.
Tailwind CSS dominated the styling conversation this week, with v4.2 and v4.3 shipping together. v4.2 added four neutral color palettes (mauve, olive, mist, taupe), a first-class webpack plugin cutting build times more than 2x versus PostCSS, and expanded logical property utilities. v4.3 followed with first-class scrollbar utilities (scrollbar-width, scrollbar-color, scrollbar-gutter), a new @container-size utility for cqb/cqh units, and zoom-* utilities for the now-baseline CSS zoom property. Stacked and compound @variant support in CSS and --default() for functional @utility definitions rounded out the release.
Several articles tackled layout and browser primitives. Ahmad Shadeed made the case for switching immediately to Media Queries Level 4 range syntax (width <= 300px, 300px <= width <= 500px), which has been Baseline-stable since March 2023 and eliminates the classic dual-breakpoint ambiguity bug. Carmen Ansio demonstrated CSS trigonometric functions — sin(), cos(), and atan2() available since Chrome 111 / Firefox 108 / Safari 15.4 — for building circle, arc, and spiral layouts without JavaScript, including the @property registration requirement for --angle transitions. Polypane's guide covered env()safe-area-inset-* usage with viewport-fit=cover for notch-aware mobile layouts, and flagged Chromium-only safe-area-max-inset-* for stable reserved zones.
Two shorter pieces rounded out the week. Remy Sharp documented the clickjacking-adjacent security risk of using popover with ::backdrop as a modal substitute instead of the dialog element, which correctly traps pointer events. An advanced CSS technique article introduced Cyclic Space Toggles — an extension of the Space Toggle hack — enabling N-state boolean shorthand APIs at roughly 95–97% browser reach without any JavaScript.
Key Takeaways
Tailwind CSS v4.3 ships native scrollbar-width, scrollbar-color, and scrollbar-gutter utilities alongside @container-size for cqb/cqh units — upgrade to get all of them in one pass.
Media Queries Level 4 range syntax (width <= 300px, 300px <= width <= 500px) is Baseline-stable since March 2023 and eliminates the silent dual-breakpoint bug — switch today.
Using popover with ::backdrop as a modal is a clickjacking risk because it does not trap pointer events; use dialog instead, which traps clicks through its ::backdrop correctly.
