CSS-Tricks*

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 👇

hue-rotate() | CSS-Tricks The hue-rotate() function rotates the color of an element and its content to a specified hue on the color wheel.

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 | CSS-Tricks Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the (even in modal mode).

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...

Let's do another post together!

Layoutit Grid: Learning CSS Grid Visually With a Generator | CSS-Tricks Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add

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 :)

It does indeed. But @dxnny.fun has a really nice idea to use it with the relative color syntax to enforce contrast that we'll publish soon and share out.

That said, yeah... ideally we'd leave that styling alone.

New in Chrome 144  |  Blog  |  Chrome for Developers Find-in-page highlights, a new geolocation element, the Temporal API, and more.

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-...

Ooo, nice catch! Was actually working earlier on an entry for view-timeline-inset where that connection was made but didn't think to update animation-range. Thanks a bunch!

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!

HTTP Archive 2025 Web Almanac | CSS-Tricks 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

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...

"I Heart CSS" DailyDev Squad | CSS-Tricks 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,

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...

What’s !important #3: Popover Context Menus, @scope, New Web Platform Features, and More | CSS-Tricks 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 fea...

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...

Bright candy gradient ghost buttons.

Same buttons in various stages of hover, when the filling content-box get XOR-ed with the text.

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...

Postcard From Web Directions Dev Summit, 2025 | CSS-Tricks Lee Meyer recently spoke at Web Directions Summit 2025. This is his experience, not only speaking at the event, but experiencing the event through the lens of anxiety and imposter syndrome.

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...

animation-range | CSS-Tricks The CSS animation-range property lets you control how a view timeline animation works, setting exactly when and where the animation starts and stops. You can

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...

css-tricks.com/rss

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 (2025 Edition) | CSS-Tricks 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.

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...

A blue link that reads Next Level. The extreme edges of the link are zoomed in focusing on a minor bit of gap between the first and last characters and the edges of the link's content box.

Here's one of those super duper minor details that can make a designer's eyes water.

css-tricks.com/text-decorat...

a Raycast 'window' with the search term of 'color-mix'. Below Is a side bar of results for what pages on css tricks has the term 'color-mix'. In a larger column to the right of the results is a preview of the selected result (css color functions) with the open graph image, and a short description of the page.

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 | CSS-Tricks It's settled! A new CSS display property keyword called grid-lanes will trigger a masonry layout mode.

Masonry Layout is Now `grid-lanes` by @sunkanmifafowora.bsky.social

css-tricks.com/masonry-layo...

Search CSS-Tricks Raycast Extension | CSS-Tricks Jelte Lagendijk built a Raycast extension for searching CSS-Tricks articles where you simply type and a get a solid set of real-time results.

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

We’re getting there — hit 18 years this past July!