White and black are two very safe colors to create contrast with another color value.

But when those are the only two values supported by color-contrast(), the contrast between a solid white/black and any other color may not be the best contrast ratio overall.

css-tricks.com/the-thing-ab...

So. Danged. Good.

Pairs well with this ginormous guide on color functions by @sunkanmifafowora.bsky.social.

css-tricks.com/css-color-fu...

Heck yeah! How have you been organizing your layers? Do you include one for reset styles?

All thanks to none other than @miriam.codes!

Interesting to think about what other types of ::picker we'll be able to style beyond .

::picker(select) {}
::picker(date) { }
::picker(color) {}
...

css-tricks.com/almanac/pseu...

16

Reposted by CSS-Tricks*

Patrick Brosset @patrickbrosset.com · 1d

I gave a lightning talk at yesterday’s @smashingconf.com Jam session on CSS masonry. Here are my slides.

In short: Masonry isn’t only for Pinterest-style layouts, doing Masonry on the web today is hard, but built-in Masonry support is coming to browsers very soon!

Patrick - Talks

Talks

patrickbrosset.com

3 8 14

CSS-Tricks* @css-tricks.bsky.social · 1d

Thanks for the assist! 🏀

2

CSS-Tricks* @css-tricks.bsky.social · 2d

"Solid blocks of text around straight-edged images can feel static. But text that bends around a guitar or curves around a portrait creates movement, which can make a story more compelling and engaging."

"Getting Creative With shape-outside" by @allthatmalarkey.bsky.social

1 1 2

CSS-Tricks* @css-tricks.bsky.social · 6d

Love seeing updated work on the CSS `cross-fade()` and how it's evolving out of the legacy syntax from WebKit's implementation.

In short: Generate a single image outta two (or more!)

css-tricks.com/almanac/func...

cross-fade() | CSS-Tricks

The cross-fade() function lets you blend more than one image at a specified transparency value.

css-tricks.com

1 10

CSS-Tricks* @css-tricks.bsky.social · 7d

“Code is my horseradish and I've been marinating in this horseradish ocean for quite a while.”

css-tricks.com/same-idea-di...

Same Idea, Different Paint Brush | CSS-Tricks

Naturally, everything looks like code when I'm staring at a blank canvas. That's whether the canvas is paper, a screen, some Figma artboard, or what have you.

css-tricks.com

2

CSS-Tricks* @css-tricks.bsky.social · 8d

Thanks! Those do indeed happen.

1 1

Reposted by CSS-Tricks*

Juan Diego Rodríguez @monknow.bsky.social · 8d

A new one for CSS-TRICKS!!!

CSS-Tricks* @css-tricks.bsky.social · 9d

Safari 26 introduces a lot of new stuff. To be precise, it adds: 75 new features, 3 deprecations, and 171 other improvements.

Here's all the CSS goodness you'll want to know about, courtesy of @monknow.bsky.social.

css-tricks.com/touring-new-...

Touring New CSS Features in Safari 26 | CSS-Tricks

Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.

css-tricks.com

3 10

CSS-Tricks* @css-tricks.bsky.social · 9d

Safari 26 introduces a lot of new stuff. To be precise, it adds: 75 new features, 3 deprecations, and 171 other improvements.

Here's all the CSS goodness you'll want to know about, courtesy of @monknow.bsky.social.

css-tricks.com/touring-new-...

Touring New CSS Features in Safari 26 | CSS-Tricks

Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.

css-tricks.com

1 4 17

CSS-Tricks* @css-tricks.bsky.social · 12d

A little personal challenge from @undeadinstitute.bsky.social to re-create the animated Gemini button that's not-so-subtle in Gmail.

css-tricks.com/recreating-g...

Fun Friday stuff! ✨

Recreating Gmail’s Google Gemini Animation | CSS-Tricks

John Rhea challenged himself to recreate the fancy button using the new CSS shape() function sprinkled with animation to get things pretty close.

css-tricks.com

4

CSS-Tricks* @css-tricks.bsky.social · 13d

Heck yeah, love hearing that! we’re all about the “a-ha!” moments around here. :)

2

CSS-Tricks* @css-tricks.bsky.social · 14d

You know how we can’t calc() numbers with mixed data types? Well, that's changing (Chrome 140) and it might be a bigger deal that @amitsheen.bsky.social describes as "self-aware” CSS.

css-tricks.com/css-typed-ar...

CSS Typed Arithmetic | CSS-Tricks

Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.

css-tricks.com

3 16

CSS-Tricks* @css-tricks.bsky.social · 19d

I know! Just popped up this morning. It lets me connect the custom domain, but it doesn't seem to stick.

1

CSS-Tricks* @css-tricks.bsky.social · 19d

It's been on my reading list for some time, but finally got around to @ericwbailey.website's opus on the pitfalls of "inclusive" personas and user research.

css-tricks.com/on-inclusive...

On inclusive personas and inclusive user research | CSS-Tricks

A set of notes taken from Eric Bailey's article about the use of inclusive personas and user research.

css-tricks.com

2 1 7

CSS-Tricks* @css-tricks.bsky.social · 21d

There's a nice series from @sturobson.com getting into *why* and *how* to "un-Sass" CSS.

www.alwaystwisted.com/articles/UnS...

@jeffbridgforth.com is making a similar leap and shares how he's approaching it:

css-tricks.com/is-it-time-t...

Is it Time to Un-Sass? | CSS-Tricks

Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgworth is thinking about it.

css-tricks.com

2 11 36

CSS-Tricks* @css-tricks.bsky.social · 23d

Did you notice that Trigonometric Functions won the “Most Hated Feature” pageant in this year’s State of CSS survey?

@monknow.bsky.social thinks they deserve more than a little love, and for good reasons…

css-tricks.com/the-most-hat...

The “Most Hated” CSS Feature: cos() and sin() | CSS-Tricks

I want to look at practical uses for CSS trigonometric functions. And we'll start with what may be the most popular functions of the "worst" feature: sin() and cos().

css-tricks.com

2 5 17

CSS-Tricks* @css-tricks.bsky.social · 26d

Squircles, bevels, steam punk... the CSS corner-shape property's got a lot of style, but what's it really good?

@dxnny.fun has a few fun ideas! Check out the marker highlighter.

css-tricks.com/what-can-we-...

What Can We Actually Do With corner-shape? | CSS-Tricks

When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when

css-tricks.com

2 7

CSS-Tricks* @css-tricks.bsky.social · 27d

The best way to learn CSS? Still by clicking through a list of shared hyperlinks and getting lost in what you don't know.

That's the open web we know and love!

Adam Argyle @nerdy.dev · 27d

Here's a #CSS study list, 100+ features to checkout from the past ~5 years.

There're surprises in here for even the most knowledgeable front-end developer!

nerdy.dev/cascading-se...

One List To Rule Them All · September 10, 2025

In the darkness may it bind us

nerdy.dev

1 13

CSS-Tricks* @css-tricks.bsky.social · 27d

LOL, great minds think alike when great ideas are floating around. ✨

@sturobson.com with a couple of ways to un-Sass yourself if compiling partials to a single file is what's keeping you down.

css-tricks.com/compiling-mu...

1 2 15

CSS-Tricks* @css-tricks.bsky.social · 27d

And then share it!

css-tricks.com/guest-writing/
piccalil.li/guest-author...

1 6

Reposted by CSS-Tricks*

Smashing Magazine @smashingmagazine.com · 28d

🌀 CSS Cascade Layers sound neat, but what happens when you drop them into a messy legacy codebase? Let’s talk about the experience of integrating cascade layers into real-world code, the good, the bad, and the spaghetti: www.smashingmagazine.com/2025/09/inte...

Integrating CSS Cascade Layers To An Existing Project — Smashing Magazine

The idea behind this is to share a full, unfiltered look at integrating CSS Cascade Layers into an existing legacy codebase. In practice, it’s about refactoring existing CSS to use cascade layers with...

www.smashingmagazine.com

6 10