1,207 articles from CSS-Tricks.
Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously thought, and is actually well-supported.
One thing we can do to help teams code consistently is provide type-checking so that all of the configurable options for a specific component are available while coding. Bryan demonstrates how he does this with TypeScript when working with Astro components.
Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a lifestyle choice whether to achieve any given effect with scripting or CSS.
I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.
Ooo, look at that: Safari Technology Preview 215 adds support for scroll-driven animations, anchor positioning, and text-wrap: pretty. That's a good sign that
Scott Jehl released a course called Web Components Demystified. This is my full set of notes from Scott's course. You'll still want to take the course on your own, and I encourage you to because Scott is an excellent teacher who makes all of this stuff extremely accessible, even to noobs like me.
The CSSWG has voted to add a size keyword that's shorthand for the width and height properties.
The videos from Smashing Magazine's recent event on accessibility were just posted the other day. I was invited to host the panel discussion with the speakers, including a couple of personal heroes of mine, Stéphanie Walter and Sarah Fossheim. But I was just as stoked to meet Kardo Ayoub who shared his deeply personal story as a designer with a major visual impairment.
Chrome has delayed shipping @function to Chrome 139! A wise choice, if you ask me; functions will set a before and after in CSS.
In this second article of a two-part series, Temani Afif demonstrates an alternative approach to creating the star rating component from the first article using experimental scroll-driven animations rather than using the border-image property.
The very first public draft of the CSS Form Control Styling Module Level 1 specification has been published as of yesterday. Still a work-in-progress but what
In this article, you'll learn how to make a full-on star rating component out of nothing but a single input element and vanilla CSS.
My thesis for today's article offers further reassurance that inline conditionals are probably not the harbinger of the end of civilization: I reckon we can achieve the same functionality right now with style queries, which are gaining pretty good browser support.
A while back on CSS-Tricks, we shared several ways to draw hearts, and the response was dreamy. Now, to show my love, I wanted to do something personal, something crafty, something with a mild amount of effort.
Adam's such a mad scientist with CSS. He's been putting together a series of "notebooks" that make it easy for him to demo code. He's got one for gradient
We've been able to get the length of the viewport in CSS since... checks notes... 2013! Surprisingly, that was more than a decade ago. Getting the
Stationery Pad is a handy way to nix a step in your workflow if you regularly use document templates on your Mac. The long-standing Finder feature essentially tells a file’s parent application to open a copy of it by default, ensuring that the original file remains unedited.
The steps for how I took the Baseline Status web component and made it into a WordPress block that can be used on any page of post.
Are partials the only thing keeping you writing CSS in Sass? With a little configuration, it's possible to compile partial CSS files without a Sass dependency. Ryan Trimble has the details.
Did you see the release notes for Chrome 133? It's currently in beta, but the Chrome team has been publishing a slew of new articles with pretty incredible demos that are tough to ignore. I figured I'd round those up in one place.
When using View Transitions you’ll notice the page becomes unresponsive to clicks while a View Transition is running. This happens because of
All of the things that the CSS Working Group would change if they had a time-traveling Delorean to go back and do things over.
The @view-transition at-rule has two descriptions. One is the commonly used navigation descriptor. The second is types, the lesser-known of the two, and one that probably envies how much attention navigation gets. But read on to learn why we need types and how it opens up new possibilities for custom view transitions when navigating between pages.
I was reading through Juan's recent Almanac entry for the @counter-style at-rule and I'll be darned if he didn't uncover and unpack some extremely interesting
Anchor positioning can be great for little interactive effects — as Temani Afif shows off with this clever idea for a menu hover.
I wrote a post for Smashing Magazine that was published today about this thing that Chrome and Safari have called "Tight Mode" and how it impacts page
I am still an AI skeptic. The biggest risk I foresee is that if your sole responsibility is to write code, your job is at risk. It’s not time to panic, but I do see a lot of value in evolving your soft skills.
2024 has been one of the greatest years for CSS: cross-document view transitions, scroll-driven animations, anchor positioning, animate to height: auto, and
The CSSWG met to try and finally squash a debate that has been going on for five years: whether Masonry should be a part of Grid or a separate system. We've got coverage of both presentations for ya.
I had the pleasure of hosting a recent Smashing Magazine workshop on product design, subbing for Vitaly Friedman who usually runs these things.
As awesome as I think it is, CSS Anchor Positioning has a lot of quirks, some of which are the product of its novelty and others due to its unique way of working. Today, I want to bring you yet another Anchor Positioning quirk that has bugged me since I first saw it.
Anselm Hannemann on the intersection between frameworks and learning the basics:
What's it look like to create a dashboard within the WordPress admin for analyzing Google Analytics data across 900 blogs across 25 multisite instances? It involves designing a user-friendly interface, leveraging the WordPress REST API, implementing a plugin for data retrieval, and addressing challenges like rate limits and authentication.
Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024's @scope at-rule. This allows for more precise CSS styling, safeguarding content from unwanted inheritance while managing global CSS complexities.
Web browsers are experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes come with some new events that we can listen for.
Do you subscribe to Piccalilli? You should. If you're reading that name for the first time, that would be none other than Andy Bell running the ship and he's reimagined the site from the ground-up after coming out of hibernation this year. You're likely familiar with Andy's great writing here on CSS-Tricks.
"Waits are a price that developers ask users to pay and loading spinners only buy so much time." —Alex Russell (permalink)
I'm interviewing Alex Russell tomorrow for Smashing Magazine — it's free so come and join the chat as we discuss the expensive JavaScript, browser choice, app
You've played Flexbox Froggy before, right? Or maybe Grid Garden? They're both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. Thomas Park made those and he's back with another game: Anchoreum.
Another title from A Book Apart has been re-released for free. The latest? Tim Brown's Flexible Typesetting. I may not be the utmost expert on typography and its best practices but I do remember reading this book (it's still on the shelf next to me!) thinking maybe, just maybe, I might be able to hold a conversation about it with Robin when I finished it.
I like how I'm hearing animations distinguished as "time-based animations" (or TBA) and "scroll-driven animations" (or SDA). A third? Maybe "navigation-based
The results from this year's survey are fairly fresh off the presses. We took a little time to sit with them and jot down some things we noticed and found interesting.
What are tooltips, exactly? There's two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.
The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.
Pop quiz! What's the difference between a Popover element and a Dialog element? The answer is not all that clear and is widely misunderstood, but Zell has a clear way to explain it so that you know which element to reach for in your work.
Change can certainly be scary whenever a beloved, independent software library becomes a part of a larger organization. I'm feeling a bit more excitement than
I totally get the goal here: make CSS more modular and scalable in WordPress. Put all your global WordPress theme styles in a single file, including
More times than I can count, while writing, I get myself into random but interesting topics with little relation to the original post. In the end, I have to
Looks like text-wrap: pretty has landed in Safari TP! Been in Chrome since 117. Let's see if Firefox follows suit.
Editor's note: This post is updated from time to time to catch up with notable developments. For timely updates, check out mullenweg.wtf or the less-anti-Matt
Tab Atkins-Bittner left a comment in our recent notes on the CSS Masonry that thoroughly (and helpfully) counters the view that masonry would be more powerful
Wired: "The combined weight of these legal cases threatens to crush the Internet Archive. The internet has entrusted its collective memory to this one
Miriam Suzanne's in the middle of a redesign of her personal website. It began in August 2022. She's made an entire series out of the work that's worth your
I was looking over an older article Patrick Brosset penned for us introducing <selectmenu>, a new proposal at the time for a more style-able cousin
For the past two months, all my livelihood has gone towards reading, researching, understanding, writing, and editing about Anchor Positioning, and with many
Seeing a lot more headlines decrying JavaScript and pumping up PHP. Always interesting to see which direction the front-end zeitgeist is leaning.
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your opinions.
I'm working on a refresh of my personal website, what I'm calling the HD remaster. Well, I wouldn't call it a "full" redesign. I'm just cleaning things up,
Only Chris, right? You'll want to view this in a Chromium browser:
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the
