Following a brief hiatus, CSS-Tricks has officially returned under new ownership, restarting its long-standing role as a major hub for front-end web development insights. Alongside the site’s editorial revival, the publication announced the return of its newsletter after a four-year absence. Starting November 10, the "What’s !important" bi-weekly roundups will transition directly into subscriber inboxes, delivering updates on modern layout techniques, experimental browser specifications, and engine-level standards.
To mark the publication’s relaunch, the platform highlighted several community resources, including an ongoing promotion for web author Mat Marquis’s "JavaScript for Everyone" course, available at a 30% discount using the promotional code CSSTRICKSFRIENDS. The editorial update also brings together an extensive collection of technical breakthroughs, layout primitives, spec proposals, and browser platform updates spanning the current ecosystem.
How to create background image refraction effects
Front-end developer Preethi Sam recently published a technique demonstrating how to render visual background image refraction effects using pure CSS. The implementation achieves optical distortion without relying on JavaScript execution or duplicating image elements within the DOM structure.
By keeping the CSS footprint minimal, the technique allows developers to apply refractive visual layers that remain performant during animation cycles. The approach leverages modern background styling capabilities to dynamically distort visual elements, demonstrating how pure styling primitives can handle effects that historically required heavy scripting or multi-layer canvas manipulation.
How to build components using style queries and attr()
Developer Brecht De Ruyte detailed a component architecture model leveraging container style queries in tandem with advanced applications of the CSS attr() function. The method allows developers to wire up customizable, highly responsive components directly within stylesheet declarations.
By combining style queries with attribute parsing, components can read state and data parameters directly from HTML element attributes and dynamically evaluate container context without requiring utility classes or JavaScript state bindings.
Complementing this exploration of container capabilities, Dan Holloran analyzed the emerging family of CSS scroll-state() queries. These specialized container queries—encompassing scrollable, scrolled, snapped, and stuck states—allow developers to apply conditional styling based on an element’s real-time scrolling position.
For instance, authoring a sticky header rule can now be handled cleanly within stylesheets using simple container query syntax:
@container scroll-state(stuck: top)
/* Dynamic styles applied when element adheres to viewport top */
This declarative approach reduces the reliance on IntersectionObserver scripts for common UI state indicators, streamlining how applications monitor scroll interactions.
The craziest CSS to ever exist
In an archival review of legacy web standards, Declan Chidlow cataloged some of the most unconventional CSS implementations in web history, focusing heavily on proprietary features introduced during the Internet Explorer era.
The retrospective highlights the drastic shift in how web standards are developed today compared to early browser vendor extensions. A prominent example includes legacy ActiveX-based visual filter syntax used prior to modern opacity and filter standards:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";The review contrasts these historical quirks with modern standard-track features, underscoring how legacy cross-browser workarounds have given way to unified, cross-vendor specifications.
How to animate CSS grids using anchor positioning
Web developer Bramus demonstrated a novel technique for animating CSS Grid layouts by combining native grid definitions with CSS anchor positioning.
Under traditional layout behavior, modifying grid structural properties forces direct layout reflows where grid cells instantly snap to new dimensions. Bramus’s technique shifts the animation target by anchoring content directly to designated grid cells. When structural changes trigger a layout reflow, the browser calculates the movement of the anchor target, allowing the underlying content—rather than the structural grid cell itself—to smoothly transition across positions.
While the technique offers a streamlined path toward performant grid transitions, implementation testing indicates that current rendering behavior in Mozilla Firefox is limited by an open platform engine issue.
New HTML features
Chris Coyier outlined a series of updates to the HTML specification, drawing attention to native element capabilities and markup attributes introduced into modern browser engines.
The update stresses that the ongoing evolution of the HTML standard frequently introduces native attributes designed to displace custom JavaScript routines. Developers are encouraged to monitor specification revisions to reduce dependency overhead and take advantage of built-in engine optimizations.
How to use container queries (the right way)
Despite container queries ranking among the most requested front-end features for years, implementation across production codebases has seen slower-than-expected growth. Technical writer Victor Ayomipo examined this adoption friction, arguing that many developers incorrectly approach container queries using the exact same mental models as traditional media queries.
While media queries evaluate global viewport parameters, container queries are designed to adjust element layout based on localized parent container dimensions. Treating container queries merely as localized viewport overrides fails to unlock their intended architecture: building modular, context-aware components that dynamically adapt regardless of where they are placed in a layout structure.
Expanding on container patterns, Cory LaViska demonstrated architectural techniques for combining @custom-media rules alongside container style queries to provide robust fallback structures across varying browser support levels. Complementing this pattern, Declan Chidlow has published a comprehensive reference guide to @custom-media within the CSS-Tricks Almanac to document implementation syntax and fallback design.
How to detect overlapping elements
Addressing dynamic layout collisions, Ahmad Shadeed published a practical methodology for detecting element overlaps using pure CSS constructs. The solution combines CSS anchor positioning, scroll-driven animations, and container style queries to monitor position changes in real time.
The specific challenge involves identifying when dynamic or fluidly sized decorative elements intersect with adjacent layout sections. Rather than hiding decorative content based on fixed viewport width breakpoints via media queries, Shadeed’s approach evaluates positional coordinates dynamically. When a fluid element collides with the boundary of a target container, the CSS container style evaluation triggers conditional rules that suppress or adjust the overlapping element precisely at the point of collision.
Introducing the previewsrc HTML attribute
Web standards contributor Patrick Brosset introduced an architectural proposal for a dedicated previewsrc attribute in HTML. The attribute aims to provide a native mechanism for delivering lightweight, low-resolution preview images—such as blurred placeholders—that display while higher-resolution image assets are fetched over the network.
<img src="high-res-image.jpg" previewsrc="blurry-placeholder.jpg" alt="Example image" />While the proposal offers a standardized HTML-first approach to progressive image loading, web platform developers have raised alternative design concepts. Some advocate instead for native state pseudo-classes, such as :loaded and :not(:loaded), which would grant CSS direct styling control over asset loading states without requiring secondary image attributes in markup.
Custom borders demo
Temani Afif published an experimental visual technique demonstrating how to construct specialized decorative borders without extra DOM nodes.
The approach functions by declaring a transparent border on the parent element, defining geometry using the emerging border-shape property, and applying a background layer set to background-clip: border-area. This configuration ensures background colors or gradients render exclusively within the designated border boundary. The implementation currently requires an experimental Chromium browser environment for evaluation.
How to animate the background color of ::selection
Developer Leon Arnott shared an authoring technique that bypasses traditional CSS limitations surrounding text selection highlights. Standard specifications strictly limit which CSS properties can be dynamically animated on the ::selection pseudo-element.
Arnott discovered that while direct transitions on ::selection properties are restricted, browsers will compute variations if the background color references a custom CSS property inherited from a parent node. By registering a custom property via @property and defining it as an animatable type, stylesheet rules can transition the parent variable:
@property --bg-color
syntax: "<color>";
inherits: true;
initial-value: transparent;
:root
--bg-color: #ff0055;
transition: --bg-color 0.3s ease;
::selection
background-color: var(--bg-color);
When the custom variable dynamically shifts on a container, the text selection background transitions smoothly, establishing a compliant workaround for customized user interface highlights.
How to randomly animate an element along another element
Chris Coyier presented a visual animation technique demonstrating how to position and move an element along the edge boundary of another node using native CSS random() functions.
The implementation calculates coordinate offsets along container edges dynamically, allowing ambient visual markers—such as decorative elements or indicators—to trace bounding boxes without scripted positioning loops.
In addition to layout manipulation, tool maintainers at Polypane published an analysis detailing how developers frequently disable the browser’s native root scroller by mistake. Setting improper overflow configurations on the :root or html elements can strip away built-in mobile viewport behavior, pull-to-refresh gestures, and browser address bar auto-hiding. The guide details how native scrolling structures function and outlines layout patterns to avoid breaking default browser shell mechanics.
How to disable the double-tap-to-zoom-in functionality
Front-end developer Andy Bell highlighted a simple yet frequently overlooked CSS property for refining touch interactions: setting touch-action: manipulation on interactive elements.
On touch-enabled mobile viewports, fast consecutive taps on interactive elements like buttons can trigger native double-tap-to-zoom behavior, delaying click event dispatch or causing accidental viewport shifts. Applying touch-action: manipulation explicitly suppresses double-tap gestures on target controls while preserving pan and pinch-zoom capabilities across the broader page, making it a valuable candidate for modern baseline CSS resets.
New web platform features and updates
The web development landscape continues to adapt to accelerated browser delivery cycles, with both Google Chrome and Mozilla Firefox maintaining bi-weekly release cadences. Despite the faster shipping intervals, recent browser iterations have introduced substantive engine capabilities rather than minor incremental maintenance patches.
Concurrently, the release of Safari 27 across iOS, iPadOS, and macOS aligns several key engine capabilities with Chrome and Firefox. This coordinated deployment elevates a broader set of layout, container query, and positioning primitives to full Baseline status across all major browser engines simultaneously, enabling reliable cross-browser deployment without custom polyfills.
