Can we make pie chart that's semantic, written with flexible markup, and avoids using expensive JavaScript libraries? @monknow.bsky.social takes a noble shot at it. 🥧 css-tricks.com/trying-to-ma...

Announcing The CSS Selection! 📰 www.projectwallace.com/the-css-sele... 📚 100,000 websites ⏱️ 100+ metrics 🔖 7 chapters The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun? @preethisam.bsky.social pokes at it with several examples. css-tricks.com/css-bar-char...

taking another look at @miriam.codes's article on @css-tricks.bsky.social Using Custom Property “Stacks” to Tame the Cascade css-tricks.com/using-custom...

A couple new additions to the ol' CSS-Tricks Almanac all about scroll-driven animations: view-timeline-axis (set scroll direction): css-tricks.com/almanac/prop... view-timeline-inset (adjust where things start and end): css-tricks.com/almanac/prop... Kudos to @undeadinstitute.bsky.social! 🧡

By default, 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. (via @dxnny.fun ) css-tricks.com/how-to-style...

📝 New CSS article! First one of the year, and as usual, plenty of modern CSS features. If you want to have an overview of how "programming with CSS" looks in 2026, read it 👇

It's easy to forget that the CSS hue-rotate() function not only works on background colors, but also text color, background images, and even box shadows! css-tricks.com/almanac/func...

There is No Need to Trap Focus on a Dialog Element by @zellwk.bsky.social css-tricks.com/there-is-no-...

A while back, @css-only.dev 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! css-tricks.com/responsive-h...

By the way, grid.layoutit.com is still a nice tool to learn how CSS grid works by playing, even if you aren't coding them by hand lately. The topic of my only contribution to @css-tricks.bsky.social :)

Chrome 144 is the first to support ::search-text, a pseudo-element for selecting find-in-page text. We've been poking at it and will share more soon, but here are the release notes for now: developer.chrome.com/blog/new-in-...

A few noteworthy new additions to the CSS Almanac... animation-range: css-tricks.com/almanac/prop... view-transition-class: css-tricks.com/almanac/prop... superellipse(): css-tricks.com/almanac/func... Props to @undeadinstitute.bsky.social, @sunkanmifafowora.bsky.social and Saleh Mubasher!

Haven't taken the time to digest everything, of course, but The @httparchive.org's 2025 Web Almanac is now out. Dig in! css-tricks.com/http-archive...

A lot of folks like @dailydev.bsky.social and, if that's you, we have a couple of ways you can get our stuff there. css-tricks.com/i-heart-css-...

Firefox 147 ships view transition types and anchor positioning, so both are now supported in all browsers meaning... BASELINE! ⭐️ developer.mozilla.org/en-US/docs/M...

All the important front-end happenings you may have missed the past couple weeks in one place: css-tricks.com/whats-import...

Really good tip for an easy gotcha using nth-child. Safari's supported this for a long while, but Firefox and Chrome are now on board as well. More info in the ol' Almanac, of course! css-tricks.com/almanac/pseu...

A little thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen.io demo codepen.io/thebabydino/... Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand... Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/... #CSS

Loving @codepen.io's new slideVars tool! Makes interactive demos ridiculously easy. Super work, @chriscoyier.net and team! css-tricks.com/playing-with...

Mr. Lee Meyer took his scrollytelling experiments on tour when he spoke at @webdirections Dev Summit. Get the slides, but also his storytelling about the scrollytelling. css-tricks.com/postcard-fro...

Have you noticed that the animation-range property syntax looks like it takes 4 values... but it's really just 2? John Rhea clarifies that nicely here: css-tricks.com/almanac/prop...

What? Style an element *while* it's being dragged? @sunkanmifafowora.bsky.social explains how it could become a thing in the future with :drag and ::dragged pseudos. css-tricks.com/future-css-d...

What are your favorite css/front-end blogs and publications?

Thank you (yes, you) for learning with us this past year — and every year since 2007. We're closing shop for the holidays and can't wait to pick things back up with you in 2026! css-tricks.com/thank-you-20...

Here's one of those super duper minor details that can make a designer's eyes water. css-tricks.com/text-decorat...

wanna be able to search @css-tricks.bsky.social before opening a browser window? This @raycast.com plug is pretty neat! www.raycast.com/j3lte/css-tr...

Masonry Layout is Now `grid-lanes` by @sunkanmifafowora.bsky.social css-tricks.com/masonry-layo...

Simply type and get a solid set of real-time search results from CSS-Tricks... pretty cool little @raycast.com extension. css-tricks.com/search-css-t...

A little blending demo on @codepen.io: codepen.io/thebabydino/... If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend... #CSS

Lots of ways to arrange elements around a circle! But how do you allow the images to overlap each other and reveal an actively hovered one? @css-only.dev has a way: css-tricks.com/responsive-l...

Happy 29th Birthday, CSS! css-tricks.com/chapter-8-css/

You won't want to miss this 👀 #css

We're kicking off a new ongoing series for all those "Ain't got time for all that" stories that pop up. Check out the first installment of "What's !important" by @dxnny.fun! css-tricks.com/whats-import...

A brand-new tool from @allthatmalarkey.bsky.social generates the sort of fun typography that Andy commonly uses in his own work. css-tricks.com/toon-title-t...

An image list may not be *new* territory, but @css-only.dev has a number of modern CSS techniques that give the pattern a fresh, interactive feel. First part of a two-parter: css-tricks.com/responsive-l...

this was such a lovely piece. and i truly believe that the best test of how well you understand something is being able to explain it to anybody at their level

When container queries first shipped, they were all about querying a container's size. But now they can query scroll states and anchored positions... What else could container queries *query*? @dxnny.fun has notes and a few ideas. css-tricks.com/what-else-co...

Add invert() to the list of approaches to dark mode. It'd be difficult to manage and comes with limitations, but works nonetheless. @media (prefers-color-scheme: dark) { body { filter: invert(100%) hue-rotate(180deg); background: black; } } css-tricks.com/almanac/func...

The browser-compat-data project (used by MDN, caniuse, and tools) now has: 20,000 commits 1,123 contributors 465 releases 19,148 data entries That's what comprehensive web compat data looks like. And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.

Come sit with the ♿☮️🦫 #a11y #ARIA #HTML www.htmhell.dev/adventcalend...

The mental model for scroll-driven animations: remembering they're the same CSS animations we're used to, but on a different timeline... that's based on scroll and/or view position, not time. css-tricks.com/creating-scr...

Have you ever tried explaining your code to a child? It forces you to look at your work a whole different way. css-tricks.com/that-time-i-...

Mr. @allthatmalarkey.bsky.social on line length as a layout measure: "When the measure is correct, the rest of the layout falls into place. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?" css-tricks.com/getting-crea...

Firefox Nightly adds CSS anchor positioning support: www.firefox.com/en-US/firefo... ...which you can learn a lot more about in our complete guide: css-tricks.com/css-anchor-p...

This is what happens when you let someone like Lee Meyer go nuts with a new CSS feature. css-tricks.com/scrollytelli... www.youtube.com/watch?v=cseY...

Several new goodies in the CSS-Tricks Almanac this morning: 🔸 corner-shape css-tricks.com/almanac/prop... 🔸 ::picker-icon css-tricks.com/almanac/pseu... 🔸 :target-before/after css-tricks.com/almanac/pseu... css-tricks.com/almanac/pseu...

We have lots of ways to share/pass/inherit certain parent property values with a child... but what if we could do that with ANY property value? @dxnny.fun pokes at the idea, including the currently unsupported inherit() function. css-tricks.com/on-inheritin...

If we have :open, then it follows we need :closed, too, right? *Mayyyyybe* says @sunkanmifafowora.bsky.social. css-tricks.com/should-we-ev...

How can trig functions be the "most hated" CSS feature where they can do things like this? @monknow.bsky.social has several other fun examples as well. css-tricks.com/the-most-hat...