CSS-Tricks✓

Fresh front-end roundup of gems: CSS Refraction Effects, Scroll State Queries, @custom-media, and More

Hey, we're back! And a little different than before...

Good news: We'll be back next week! Now is a *really* good time to get on the newsletter, which is also back after (oh snap) 4 years!

📝 Why CSS-Tricks Has Been Quiet Lately (cc: @digitalocean @paddix)

Lee Meyer: "A person would have to be a special breed of crazy to attempt to polyfill CSS random()." And then he did it.

Creating Web Widgets Using the Document Picture-in-Picture API The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.

A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*.

An all-too-early look at CSS Navigation Matching. Looks like a nice way to abstract view transitions directly in CSS... though still tough to grok at this early stage.

So, you got the ol' "Blocked aria-hidden" console warning. No error, no worry, right? Think again. And it's tougher to solve than most of the suggested fixes.

Very clever examples from @rpsthecoder animating border-image. Super easy to forget it's animatable in the first place. That radial gradient one is just... 😍

Compiled some notes on the <dialog> element — feel free to add yours to it!

Gap Decorations have changed a BUNCH since they went from experimental to shipping in Chrome and Edge. Here's Microsoft's Sam Davis Omekarajr building off an example Patrick Brosset did for us a while back to demo what's new.

“Smart” Layouts With Container Queries Shoutout to @KevinJPowell 💛

CSS Chronicles XLII

CSS Functions and Mixins Module Notes

Pop(over) the Balloons

Poppin’ In

CSS Container Queries

::details-content

CSS Length Units