Scroll-Driven Animations
The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it.
Quick Hit #128
Safari TP 242 trials the more advanced version of attr() from CSS Values and Units Module Level 5.
A new programming model for durable execution
Vercel Workflows is now GA. Write durable, long-running functions in TypeScript or Python. No orchestrator, no Kubernetes, no separate infrastructure. 100M+ runs in beta across 1,500+ customers.
Introducing Agent Lee - a new interface to the Cloudflare stack
Agent Lee is an in-dashboard agent that shifts Cloudflare’s interface from manual tab-switching to a single prompt. Using sandboxed TypeScript, it helps you troubleshoot and manage your stack as a grounded technical collaborator.
Squash and Stretch
Have you ever heard of Disney’s 12 Basic Principles of Animation? In this tutorial, we’ll explore how we can use the very first principle to create SVG micro-interactions that feel way more natural and believable. It’s one of those small things that has a big impact.
Selecting a Date Range in CSS
A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript.
Quick Hit #119
Quiz: CSS or BS?
New CSS Multi-Column Layout Features in Chrome
Chrome 145 introduces the column-height and column-wrap CSS multi-column layout properties, enabling us to wrap the additional content into a new row.
Quick Hit #117
Safari TP 240 becomes the first to ship the revert-rule CSS keyword, which rolls the rule back to when it didn’t have its current value.
How we use Abstract Syntax Trees (ASTs) to turn Workflows code into visual diagrams
Workflows are now visualized via step diagrams in the dashboard. Here’s how we translate your TypeScript code into a visual representation of the workflow.
Inside Gen 13- how we built our most powerful server yet
Cloudflare's Gen 13 servers introduce AMD EPYC™ Turin 9965 processors and a transition to 100 GbE networking to meet growing traffic demands. In this technical deep dive, we explain the engineering rationale behind each major component selection.
Experimenting With Scroll-Driven corner-shape Animations
The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.
Sneaky Header Blocker Trick
There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog post, I’ll break down the surprisingly-straightforward implementation so you can start using this trick yourself.
Patch Me If You Can: AI Codemods for Secure-by-Default Android Apps
Even seemingly simple engineering tasks — like updating an API — can become monumental undertakings when you’re dealing with millions of lines of code and thousands of engineers, especially if the changes are security-related. Nowhere is this more apparent than in mobile security, where a single class of vulnerability can be replicated across hundreds of […]
Moving From Moment.js To The JS Temporal API — Smashing Magazine
The way JavaScript handles time has evolved significantly, from the built-in `Date` API to Moment.js and now Temporal. The new standard fills gaps in the original `Date` API while addressing limitations found in Moment and other libraries. Joe Attardi shares practical “recipes” for migrating Moment-based code to the new Temporal API.
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
For years, developers have been hacking around the limitations of `border-radius`, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new `corner-shape` property finally changes that, opening the door to beveled, scooped, and squircle corners.
Building Dynamic Forms In React And Next.js — Smashing Magazine
Some forms stay UI, while others quietly become rule engines. Here’s why these two different approaches exist and how to choose between them.
The Different Ways to Select <html> in CSS
Sure, we can select the <html> element in CSS with, you know, a simple element selector, html. But what other (trivial and perhaps useless) ways can we do it?
Getting Started With The Popover API — Smashing Magazine
What happens if you rebuild a single tooltip using the browser’s native model without the aid of a library? The Popover API turns tooltips from something you simulate into something the browser actually understands. Opening and closing, keyboard interaction, Escape handling, and much of the accessibility now come from the platform itself, not from ad-hoc JavaScript.
We deserve a better streams API for JavaScript
The Web streams API has become ubiquitous in JavaScript runtimes but was designed for a different era. Here's what a modern streaming API could (should?) look like.
Yet Another Way to Center an (Absolute) Element
TL;DR: We can center absolute-positioned elements in three lines of CSS. And it works on all browsers!
Building frontend UIs with Codex and Figma
With Codex to Figma, teams can bring real, running interfaces into Figma to explore, refine, and make decisions together, then bring it back to Codex with design context intact.
A Complete Guide to Bookmarklets
Browsers don't just let you bookmark web pages. You can also bookmark JavaScript, allowing you to do so much more than merely save pages.
Sprites on the Web
In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web these days. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this technique, and explore some of the potential use cases.
How I used Cursor to Migrate Frameworks
I upgraded kentcdodds.com from Remix v2 to React Router v7 in a day with over 17k lines of code changed. Here's how I did it.
What’s !important #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and More
This issue of What’s !important is dedicated to our friends in the UK, who are currently experiencing a very miserable 43-day rain streak. Presenting: the five most interesting things to read about CSS from the last couple of weeks. Plus, the latest features from Chrome 145, and anything else you might’ve missed. TL;DR: lots of content, but also lots of rain.
Making a Responsive Pyramidal Grid With Modern CSS
This is the second part of a small two-part series. In this article, we will explore another type of grid: a pyramidal one. We are still working with hexagon shapes, but a different organization of the elements., while exploring other different shapes.
Approximating contrast-color() With Other CSS Features
The new contrast-color() function is not fully supported yet. But can we still implement it in a cross-browser friendly way using other new CSS features?
Trying to Make the Perfect Pie Chart in CSS
Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine
Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to write CSS that can keep up with modern front ends?
Making agent-friendly pages with content negotiation
Learn how Vercel uses HTTP content negotiation to serve markdown to agents and HTML to humans from the same URL, reducing response sizes by 90% while keeping both versions synchronized.
ReliCSS
Stu Robson's ReliCSS (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions.
Unstacking CSS Stacking Contexts — Smashing Magazine
In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly useful, but they’re also widely misunderstood and often mistakenly created, leading to a slew of layout issues that can be tricky to solve.
Responsive Hexagon Grid Using Modern CSS
A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive!
Quick Hit #88
The new CSS grid lanes (aka masonry) layout spec continues to evolve... item-tolerance becomes flow-tolerance (Issue #10884).
Quick Hit #87
Manuel Matuzović shares his position-try-fallbacks CSS reset for ensuring that anchored elements always flip/never overflow.
Context windows, Plan agent, and TDD: What I learned building a countdown app with GitHub Copilot
Learn how I managed context to keep Copilot focused, used the Plan agent to sharpen vague requirements, and required Test Driven Development practices to catch bugs before users.
Quick Hit #86
Chrome 144 trials the <geolocation> HTML element, which is currently on the standards track.
"I Heart CSS" DailyDev Squad
If you're reading this, chances are you already have some sort of way that you're following when we publish new content, whether that's RSS, Bluesky,
Smashing Animations Part 8: Theming Animations Using CSS Relative Colour — Smashing Magazine
CSS relative colour values are now widely supported. In this article, pioneering author and web designer [Andy Clarke](https://stuffandnonsense.co.uk/) shares practical techniques for using them to theme and animate SVG graphics.
Dot product: Component vs. Geometric definition - Eli Bendersky's website
What’s !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More
2026 is almost upon us. I know we’re all itching to see the clock strike midnight (cue The Final Countdown by Europe), but not without recapping the best CSS-related things that happened over the last two weeks!
Quick Hit #78
Happy new year, from the CSS-Tricks team!
Quick Hit #76
State of HTML 2025 is now live!
Thank You (2025 Edition)
This is the best job I've had in my life and it's only possible because you keep showing up each day to read, learn, share, and discuss all-things-front-end (and a little CSS, of course) with us.
Smashing Animations Part 7: Recreating Toon Text With CSS And SVG — Smashing Magazine
In this article, pioneering author and web designer [Andy Clarke](https://stuffandnonsense.co.uk) shows his techniques for creating [Toon Text titles](https://stuffandnonsense.co.uk/toon-text/index.html) using modern CSS and SVG.
What’s !important #1: Advent Calendars, CSS Wrapped, Web Platform Updates, and More
The best CSS news from around the web from the last two weeks. In this edition: advent calendars, CSS Wrapped 2025, and the latest Web Platform Updates.
How AI Is Transforming the Adoption of Secure-by-Default Mobile Frameworks
Meta’s secure-by-default frameworks wrap potentially unsafe OS and third-party functions, making security the default while preserving developer speed and usability. These frameworks are designed to closely mirror existing APIs, rely on public and stable interfaces, and maximize developer adoption by minimizing friction and complexity. Generative AI and automation accelerate the adoption of secure
Quick Hit #68
Firefox 146 has shipped the CSS Color 5 version of contrast-color() that only resolves to black or white. Hopefully Chrome support and CSS Color 6
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine
CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.
That Time I Tried Explaining HTML and CSS to My 5-Year Old Niece
I would like to tell you what I learned from a five-year old child about HTML and CSS. It’s funny how explaining something you do almost naturally teaches you about yourself and what you take for granted.
HTML Web Components Proposal From 1998
It's easy to think of HTML Web Components as a recent feature, but it has roots that go all the way back to 1998.
Quick Hit #65
Firefox Nightly adds CSS anchor positioning support, which you can learn a lot more about in our complete guide.
Masonry: Things You Won’t Need A Library For Anymore — Smashing Magazine
CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.
Quick Hit #63
Black Friday might be over but you can still save big on any of Piccalilli's CSS, JavaScript, or UX courses until December 9th, 2025.
Brand New Layouts with CSS Subgrid
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid unlocks exciting new layout possibilities, stuff we couldn’t do until now. ✨
Workflow Builder: Build your own workflow automation platform
Workflow Builder is a free, open-source template, powered by Next.js and the Workflow DevKit, that helps you build workflow builder applications and agents.
Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine
Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to manage and turn it into a clear, predictable system.
Enhancing HDR on Instagram for iOS With Dolby Vision
We’re sharing how we’ve enabled Dolby Vision and ambient viewing environment (amve) on the Instagram iOS app to enhance the video viewing experience. HDR videos created on iPhones contain unique Dolby Vision and amve metadata that we needed to support end-to-end Instagram for iOS is now the first Meta app to support Dolby Vision video, […]
CSS Gamepad API Visual Debugging With CSS Layers — Smashing Magazine
Debugging controllers can be a real pain. Here’s a deep dive into how CSS helps clean it up and how to build a reusable visual debugger for your own projects.