206 articles by Geoff Graham.
Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave. MicroLighter: Syntax Highlighter originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-* . Resolved: CSS Class Prefix Selector originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for cross-document view transitions declarative in CSS rather than managing that stuff in JavaScript. CSS Navigation Matching, Early Days originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project. Hosting those projects has always been a roadblock though. WordPress.com Student Plan originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system. Dark mode toggles: two states are enough originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Smashing Magazine’s in-person conferences are back and returning to the wonderful city of Freiburg next month, September 7–10. SmashingConf Freiburg 2026, September 7-10 originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it. Using and Styling the Dialog Element originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Props for That creates live props based things CSS can't normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity.
One of those nuances to keep in your back pocket when writing for screen readers.
Mat Marquis on Google pulling the web standards equivalent of U2 album marketing:
Looking at research and experiments that are designed to automatically generate user interfaces based on user preferences.
Stu Robson's ReliCSS (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions.
The @custom-media at-rule has landed in Firefox Nightly! I couldn't find it in the release notes but Adam Argyle's on the beat noting that it's behind a flag
The new CSS grid lanes (aka masonry) layout spec continues to evolve... item-tolerance becomes flow-tolerance (Issue #10884).
I love me some good web research reports. I'm a sucker for them. HTTP Archive's Web Almanac is one report I look forward to every year, and I know I'm not
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,
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.
Andy Clarke with a brand-new resource. It generates the sort of fun typography that Andy commonly uses in his own work that's geared towards cartoon headings.
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.
Firefox Nightly adds CSS anchor positioning support, which you can learn a lot more about in our complete guide.
Bramus:
CSS Masonry shaping up now that the CSSWG has landed on display: grid-lanes to trigger the layout switch.
Bramus shares that Chrome Canary no longer forces CSS animations using width and height properties to run on the main thread.
A few links about headings that I've had stored under my top hat.
Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?
One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:
Alignment might be one of the more confusing (or misunderstood) parts of CSS. I love having a thorough explanation from someone like Temani Afif who has it
A working draft for CSS Environment Variables is posted. Same concept as var(), but env() is a “global” variable at the document level for values the user
Stu Robson outlines two ways to compile multiple CSS files when you aren't relying on Sass for it.
Everyone has a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer.
Really good to see Firefox Nightly join in the URL text fragments fun. Looks like we'll have broad support super soon!
My brain can't help but try to make connections between seemingly disparate ideas. And that's what happened yesterday when I read:
CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions.
Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.
The WebKit blog is back with a follow-up on its CSS Masonry coverage. It leans into a direction (display: grid), and that direction is different than Chrome's
Layout. It's one of those easy-to-learn, difficult-to-master things, like they say about playing bass. Not because it's innately difficult to, say, place two
An early preview of Chrome 139 includes six new CSS features, including the first hint of custom functions.
KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I've enjoyed following Chris as he's published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.
Chrome 137 introduces the newly-specced if() function. Una Kravets posted a nice video overview and Temani Afif writes about it as well.
Firefox 139 includes an update where content inside a <details> element is included in an in-page search. Previously, that content was ignored when the
Clever, clever that Andy Bell. He shares a technique for displaying image alt text when the image fails to load. Well, more precisely, it's a technique to apply styles to the alt when the image doesn't load, offering a nice UI fallback for what would otherwise be a busted-looking error.
Hey, isn't there a fairly new CSS feature that works with scroll regions? Oh yes, that's Scroll-Driven Animations. Shouldn't that mean we can trigger an animation while scrolling through the items in a CSS carousel?
The CSS shape() function recently gained support in both Chromium and WebKit browsers. It's a way of drawing complex shapes when clipping elements with the clip-path property.
Straight from the W3C Technical Architecture Group: "e see an urgency to have a strict timeline for the removal of third-party cookies."
Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the "other" side of web design and front-end development —
Browsers are planning to update UA stylesheets for nested <h1> elements. It's a good idea to make sure your nested heading styles aren't relying on the
This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.
If I were starting with CSS today for the very first time, I would first want to spend time understanding writing modes because that's a great place to wrap
Chrome has prototyped these features and released them in Chrome 135. Adam Argyle has a wonderful explainer over at the Chrome Developer blog. Kevin Powell has an equally wonderful video where he follows the explainer. This post is me taking notes from them.
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.
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.
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
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
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.
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