Best of CSS — March 2026

1
Article
Chrome Developers·10w
Chrome for Developers
Chrome 146 introduces three notable features for web developers. Scroll-triggered animations enable declarative CSS-based control of animations based on scroll position, replacing common JavaScript-based scroll detection patterns. Scoped custom element registries allow multiple custom element definitions for the same tag name within a page, preventing naming conflicts when using libraries from multiple sources. The Sanitizer API provides a built-in way to strip script-executing content from user-supplied HTML, making it easier to build XSS-free web apps — this updated version is also available in Firefox.
109
6
2
Article
Ruby Flow·8w
Why I Stopped Using Bootstrap and Moved to Tailwind CSS
A developer shares their personal journey switching from Bootstrap to Tailwind CSS, outlining four key reasons for the switch: eliminating context switching between HTML and CSS files, avoiding the pain of naming CSS classes, smaller production bundle sizes via Tailwind's purge compiler, and achieving more unique UI designs. The post also addresses the common criticism of verbose HTML by showing how Rails helpers or components can encapsulate Tailwind classes cleanly.
130
55
3
Article
Codrops·12w
Sticky Grid Scroll: Building a Scroll-Driven Animated Grid
A step-by-step tutorial on building a scroll-driven animated image grid using GSAP, ScrollTrigger, and Lenis. The technique uses a sticky layout where scroll progress maps to animation phases: a 12-image grid reveals column by column, then zooms and opens to reveal centered text content. The tutorial covers HTML structure, a fluid rem CSS system, sticky positioning, and a modular JavaScript class that orchestrates multiple GSAP timelines for column reveal, grid zoom, parallax, and content fade-in.
71
3
4
Article
freeCodeCamp·9w
Build 19 Web Dev Projects using HTML, CSS, & JavaScript
A 12-hour freeCodeCamp YouTube course covering 19 hands-on web development projects built with HTML, CSS, and JavaScript. Projects range from interactive quiz games, Kanban boards, and expense trackers to API integrations (MealDB, GitHub, currency converter), UI components, and utility tools like a password generator and scroll progress indicator.
67
2
5
Article
CSS-Tricks·10w
4 Reasons That Make Tailwind Great for Building Layouts
Tailwind CSS excels at building layouts for four key reasons: layout styles are tightly coupled to HTML structure making them easier to visualize inline, utility classes eliminate the need to name layouts, context-specific layout variations can be applied directly without modifier classes, and responsive variants can be created on the fly. The post also introduces a CSS variable-based approach (grid-simple with --cols and --span) that makes grid layouts even more readable than standard Tailwind utilities, and promotes combining Tailwind with vanilla CSS synergistically rather than relying solely on utility classes.
54
3
6
Article
freeCodeCamp·9w
How Atomic CSS and Functional Programming Are Related
Atomic CSS (also historically called Functional CSS) shares conceptual parallels with functional programming. The post explores three core FP principles — pure functions, immutability, and function composition — and maps each to Atomic CSS equivalents. Purity in CSS means element styles depend only on their own classes, not on context or parent selectors. Immutability means utility classes don't override each other, unlike BEM modifiers that mutate base styles. Composition means combining small single-purpose utilities to achieve complex styling, just as FP composes simple functions. Examples use the mlut framework alongside Tailwind CSS references to illustrate each concept.
54
7
Article
CSS Tip·10w
A Squishy Button with a Hover/Click Effect
A tutorial on creating a squishy button with hover and click animations using the CSS `shape()` function. The technique involves generating multiple shape states with a specific relationship between size and radius values (their sum must remain constant), using an online generator at css-generators.com/fancy-frame to produce the required CSS code. Three shape states are defined to create the squish animation effect.
44
3
8
Article
SitePoint·10w
There Is No “Wrong” in CSS
There is no objectively "wrong" CSS, and four reasons support this claim. First, if CSS works without practical disadvantages, there's no reason to change it, especially given the web platform's strong backwards-compatibility guarantees. Second, any consequences of suboptimal CSS fall on the developer or organization, making it their call to address. Third, CSS is easy to refactor when a better approach is needed, so no mistake is truly grave. Fourth, when CSS creates real barriers for users, that's arguably a platform-level responsibility rather than a developer failure. CSS advice should always be understood as context-dependent guidance, not universal law — and distinguishing advice from dogma is key to evaluating criticism of your code.
44
7
9
Video
ByteMonk·12w
Tailwind CSS: The Web Dev Game Changer
Tailwind CSS rose to prominence by applying solid design principles: composition over inheritance (independent utility classes), convention over configuration (smart defaults), and locality of behavior (styles co-located with HTML). These qualities made it predictable and easy to learn. However, those same qualities made it trivially easy for AI tools like GitHub Copilot and ChatGPT to generate Tailwind code, which devastated the business model. Documentation traffic dropped, revenue fell ~80%, and 75% of the engineering team was laid off. The founder shut down the docs site, citing AI's brutal impact. The broader lesson: any developer tool that's easy to learn is also easy for AI to replicate, putting documentation-and-premium-component business models at risk.
43
10
Video
Stefan Mischook·10w
Developers, This Is How You Code 5× Faster in 2026
A video transcript offering advice on boosting developer productivity by 5x or more. Key recommendations include mastering fundamentals before picking frameworks, evaluating job market demand when choosing technologies, using AI tools strategically rather than delegating entire projects to them, leveraging IDEs, and learning full-stack development for architectural awareness. The core AI insight is that effective AI use requires developer-level knowledge: vague prompts produce messy code, while precise, technically-grounded prompts yield fast, clean results. The 'AI doom loop' is highlighted as a real risk for developers who lack foundational skills.
44
3
11
Video
Joy of Code·11w
20 Modern CSS Features You Should Know About
A walkthrough of 20 modern CSS features introduced in 2025, covering invoker commands, dialogue light dismiss, popover hints, customizable select elements, CSS carousels with scroll buttons and markers, scroll spy via scroll-target-group, anchored container queries, interest invokers, scroll state queries, sibling index/count functions, scroll-into-view container option, nested view transition groups, DOM state-preserving moveBefore API, advanced attr() function, event source on toggle events, textbox trimming, the shape() function, CSS if statements, custom CSS functions, expanded range syntax for style queries, the stretch sizing keyword, and corner-shape property.
43
1
12
Article
Cassidy's blog·11w
Making art with CSS gradients and corner-shape and skew, oh my
A hands-on exploration of combining CSS wavy gradients, skew transforms, and the corner-shape property to create a small piece of CSS art resembling a diving board. The author shares the process from sketch to CodePen, including a recorded walkthrough, noting the challenges of skew transforms and the intentional choice to code without AI assistance.
39
13
Article
Frontend Masters·11w
The Big Gotcha of Anchor Positioning – Frontend Masters Blog
CSS Anchor Positioning has a significant gotcha: the anchor element must be fully laid out before the element anchored to it. This means DOM order matters more than many developers realize, and you can't freely place anchored elements anywhere in the DOM. The safest approach is to make the anchor and positioned element siblings with the anchor appearing first in the DOM. The post also touches on the Inset-Modified Containing Block (IMCB) concept and links to helpful resources like anchor-tool.com and articles by Temani Afif and James Stuckey Weber. The author argues CSS should address this footgun in future iterations.
40
5
14
Article
Bram.us·9w
More Easy Light-Dark Mode Switching: light-dark() is about to support images!
The CSS `light-dark()` function is being extended beyond colors to support `<image>` values, allowing developers to swap background images, masks, and logos based on color scheme in a single declaration. This eliminates the need for repetitive `@media (prefers-color-scheme)` blocks and respects local `color-scheme` overrides. Browser support is early: available behind a flag in Chromium 148+, shipping in Firefox 150 (stable April 2026), and not yet supported in Safari. A `@supports` detection snippet using `linear-gradient()` is provided for progressive enhancement. For non-color, non-image values, a 3-line CSS Custom Function workaround is also shown.
41
3
15
Article
Bram.us·12w
Animating CSS position-area with View Transitions
CSS Anchor Positioning lacks native support for animating the `position-area` property, which only supports discrete animation. A workaround technique uses the `@bramus/style-observer` library to detect computed value changes on `position-area` and `position-try`, then triggers a View Transition to animate between the old and new positions. The approach temporarily resets the element to its previous position before starting the transition. Known issues include Firefox incompatibility, a 1-frame glitch in Chrome due to `transitionrun` timing ambiguity, and scroll-related sync issues during View Transitions. The Chrome glitch currently limits practical usability.
36
16
Article
Bram.us·10w
Introducing view-transitions-mock: A non-visual Polyfill for Same-Document View Transitions
view-transitions-mock is a non-visual polyfill for the Same-Document View Transitions API, created to eliminate the need for defensive browser-support checks in your code. It implements the full JavaScript API surface of the View Transition spec (including ViewTransition promises, transitionRoot, activeViewTransition, and View Transition Types) without polyfilling the visual/animation aspects. Install via npm, call register() before using document.startViewTransition(), and your code runs without errors in all browsers. Registration can be tuned with requireTypes and forced options for fine-grained control.
33
1
17
Article
Josh W Comeau·9w
Sneaky Header Blocker Trick • Josh W. Comeau
A CSS-only technique for creating a sticky header that appears to change background color as the user scrolls through different page sections. Instead of modifying the header itself, two color-matched 'blocker' elements using position:sticky sit behind the fixed header — one in the hero section (blue) and one in the main content area (white). As the user scrolls, each blocker naturally exits its container, creating a seamless hand-off effect. The post also covers design constraints, how to integrate decorative SVG swoops into the layering, and when JavaScript fallbacks are necessary.
34
2
18
Article
Chrome Developers·10w
What's new in DevTools (Chrome 146)
Chrome 146 DevTools ships several notable updates: the DevTools MCP server reaches v0.19.0 with Lighthouse audit integration, a --slim token-saving mode, new accessibility and LCP debugging skills, memory snapshots, and screencast recording. Console history now preserves edits while navigating between commands. Adopted Style Sheets gain a dedicated DOM node in the Elements panel, enabling direct inspection and editing. The Grid Editor adds dense packing support for grid-auto-flow. The Privacy and Security panel is renamed to Security, with privacy issues consolidated into the Console. Stack trace architecture in Sources was overhauled to fix source map jumping issues.
20
5
19
Article
Bram.us·8w
CSS position: sticky now sticks to the nearest scroller on a per axis basis!
Chrome 148 introduces a long-awaited CSS improvement: `position: sticky` now tracks the nearest scrolling container per axis independently. This solves the classic problem of data tables needing both a sticky header (vertical axis) and a sticky first column (horizontal axis) simultaneously. Previously, wrapping a table in an `overflow-x: auto` container caused the wrapper to become the sticky reference for both axes, breaking vertical stickiness. The fix requires using `overflow: auto clip` on the wrapper instead of `overflow-x: auto`, preventing the wrapper from becoming a vertical scroll container. Firefox and Safari do not yet support this feature, and CSS `@supports` detection isn't available yet, but a JavaScript-based feature detection snippet is provided.
53
20
Article
Make WordPress Core·10w
Custom CSS for Individual Block Instances in WordPress 7.0
WordPress 7.0 adds a new `customCSS` block support that lets users apply custom CSS directly to individual block instances from the post or site editor. Previously, targeting a single block required a two-step workaround involving custom class names and the global CSS field. The new feature adds a Custom CSS input in the block inspector's Advanced panel, gated by the `edit_css` capability. CSS is stored in the block's `style` attribute under a `css` key, and at render time a unique hash-based class is generated and scoped using `:root :where()` to ensure proper cascade order after Global Styles. The support is enabled by default for all blocks, with an opt-out via `block.json`. Several core blocks like `core/freeform` and `core/html` opt out by default. Plugin and theme developers using server-side rendering should ensure their block's outermost tag is a standard HTML element.
18
2
21
Article
Bram.us·10w
Detecting at-rule support in CSS with @supports at-rule(@keyword)
CSS is gaining a new feature detection capability via `@supports at-rule(@keyword)`, shipping in Chromium 148. It lets developers check whether a browser supports a specific CSS at-rule (like `@starting-style` or `@view-transition`) before using it. The feature can also be used in `@import` supports conditions. Notably, the originally proposed extensions for detecting specific descriptors, preludes, or full at-rule blocks have been dropped from the spec. Firefox and Safari do not yet support this feature. Self-detection is possible by checking `@supports at-rule(@supports)`.
18
22
Article
CSS Tip·11w
A Generator for Fancy Frames
A CSS generator tool that creates fancy frames (squiggly, wavy, ragged, torn, etc.) using a single line of code with `clip-path: shape()`. The implementation is responsive, works with images, single-element, and is ready for the upcoming `border-shape` CSS property.
19
23
Video
Kevin Powell·10w
We've been using container queries wrong
Container queries are commonly used as a direct replacement for media queries, checking container size instead of viewport size. But this mirrors the limited mental model inherited from media queries. There's a broader, more powerful way to use container queries that enables smarter, intrinsic layouts — moving beyond breakpoint-driven thinking toward designs that respond to their own natural structure.
16
1
24
Video
Kevin Powell·8w
Get people to see your resume
A developer shares a job search strategy of creating a short 'sizzle reel' video to replace or supplement a traditional resume. The video showcases skills in an engaging, shareable format that decision-makers can evaluate in seconds without downloading anything. Syndicating it across LinkedIn, Twitter, Bluesky, and Mastodon helped build social proof through comments and interactions, ultimately getting the creator in front of senior hiring decision-makers.
44
2
25
Article
CSS-Tricks·11w
The Different Ways to Select <html> in CSS
A fun exploration of the various ways to select the HTML root element in CSS beyond the obvious `html` selector. Covers `:root`, `:scope`, the `&` nesting selector, `:has(head)` / `:has(body)`, and the quirky `:not(* *)` pattern. Each approach is explained with its specificity implications, practical use cases, and notable edge cases — including when `:scope` differs from `:root` inside `@scope` blocks and how `&` behaves outside of nested contexts.
16
1

See all CSS archives