Quick Hit #107
Font Awesome are launching a Kickstarter campaign to transform Eleventy (11ty) into Build Awesome.
The Value of z-index
How we look at the stacking order of our projects, how we choose z-index values, and more importantly, the implications of those choices.
Quick Hit #106
A new version of Chrome will be released every two weeks (instead of four) starting from September 2026.
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?
Quick Hit #105
Safari TP 238 trials customizable <select>, which Chrome has fully implemented already.
Quick Hit #104
Safari TP 238 trials :open, which would make it baseline (yes, really).
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!
What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
An Exploit ... in CSS?!
Read an explanation of the recent CVE-2026-2441 vulnerability that was labeled a "CSS exploit" that "allowed a remote attacker to execute arbitrary code inside a sandbox via a crafted HTML page."
Quick Hit #103
Firefox 148 makes shape() available without a flag, aligning with Chrome and Safari.
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.
Quick Hit #99
Chrome 145 enables % units for letter-spacing and word-spacing as well as overscroll-behavior for all scroll containers, now baseline.
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.
Quick Hit #98
Chrome 145 finally ships text-justify, which is almost baseline now.
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?
Quick Hit #97
Chrome 145 becomes the first to ship customizable <select>, as well as column-wrap and column-height for better multicol layouts.
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.
Quick Hit #96
Una Kravets announces border-shape with a couple of cool demos.
Quick Hit #95
Adam Argyle quickly outlines the upcoming customizable <select>.
Styling ::search-text and Other Highlight-y Pseudo-Elements
The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.
ReliCSS
Stu Robson's ReliCSS (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions.
Open Props @custom-media Recipes
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
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 #89
7 days left to cast your vote for the best GSAP-animated site of the year!
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.
Quick Hit #86
Chrome 144 trials the <geolocation> HTML element, which is currently on the standards track.
HTTP Archive 2025 Web Almanac
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
"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,
Quick Hit #85
Chrome 144 becomes the first to support ::search-text, a pseudo-element for selecting find-in-page text.
What’s !important #3: Popover Context Menus, @scope, New Web Platform Features, and More
The developer community hasn’t wasted any time kicking off 2026 with some really great articles, demos, and insights. Firefox 147 and Chrome 144 also shipped, and while they’re not jam-packed with features, the releases are still pretty exciting for what’s normally a slow time of year, so without further ado, here’s what’s important from the last couple of weeks (or should I say the first couple o
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 #77
:near(<length>) has been proposed, which would match whenever the pointer is within a specified proximity of the element.
Quick Hit #76
State of HTML 2025 is now live!
Quick Hit #75
Safari 26.2 ships command and commandfor as well as hidden=until-found, which are now supported in all web browsers.
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.
Quick Hit #74
Safari 26.2 ships sibling-index(), sibling-count(), and field-sizing, bringing them close to baseline.
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.
Toon Title Text Generator
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.
Quick Hit #70
Firefox 146 becomes the first to trial @custom-media, an at-rule that’s like custom properties but for media queries.
What Else Could Container Queries... Query?
How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?
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
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.
Quick Hit #67
Responding to Wes Bos, Bramus demonstrates the different position-area values and how to handle inside corners (as there aren’t values for these).
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 #66
@heyo53 asks on Bluesky: Is it okay to style or hide scrollbars?
Getting Creative With “The Measure”
A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?
Quick Hit #65
Firefox Nightly adds CSS anchor positioning support, which you can learn a lot more about in our complete guide.
Quick Hit #64
Chrome 143 has introduced anchored fallback container queries to help us query the currently applied fallback position of anchored elements.
Scrollytelling on Steroids With Scroll-State Queries
Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling.
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.
Prevent a page from scrolling while a dialog is open
Bramus:
Quick Hit #62
CSS Masonry shaping up now that the CSSWG has landed on display: grid-lanes to trigger the layout switch.
Quick Hit #61
Bramus shares that Chrome Canary no longer forces CSS animations using width and height properties to run on the main thread.
The Range Syntax Has Come to Container Style Queries and if()
Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
Headings: Semantics, Fluidity, and Styling — Oh My!
A few links about headings that I've had stored under my top hat.
Explaining the Accessible Benefits of Using Semantic HTML Elements
Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?
Getting Creative With Small Screens
On mobile, people can lose their sense of context and can’t easily tell where a section begins or ends. Good small-screen design can help orient them using a variety of techniques.