CSS-Tricks*

What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More We’re back! Don't worry, this isn’t a trick (despite what our name suggests!). However, due to the hiatus, we're also a little behind. That’s why this issue... https://css-tricks.com/whats-important-19/

If you're supporting me on Ko-fi/ Patreon/ Liberapay, then first of all thank you for helping me stay afloat as this is my main source of income. Second, got a massive new post for Cheetah+ supporters - you won't find this anywhere else. ko-fi.com/post/Text-ba... www.patreon.com/anatudor/pos...

CSS-Tricks has a new owner! Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that. https://css-tricks.com/css-tricks-has-a-new-owner/

📝 Why CSS-Tricks Has Been Quiet Lately (cc: @digitalocean.com @css-tricks.bsky.social ) geoffgraham.me/why-css-tric...

Quick Hit #182 Safari TP 252 trials named-feature() and user-select. https://css-tricks.com/quick-hit-182/

Quick Hit #181 Firefox 157 (Nightly) ships overscroll-behavior: chain. https://css-tricks.com/quick-hit-181/

Quick Hit #180 Chrome 153 becomes the first to implement scroll-axis-lock, , and . https://css-tricks.com/quick-hit-180/

Quick Hit #179 Chrome 155 (Dev) implements random() (also available in Safari) as well as symbols() (in Firefox). https://css-tricks.com/quick-hit-179/

Quick Hit #178 Chrome 155 (Dev) implements margin-trim, following Safari. https://css-tricks.com/quick-hit-178/

Quick Hit #177 Firefox 155 implements progress(), now Baseline. https://css-tricks.com/quick-hit-177/

Quick Hit #176 Firefox 155 ships alpha() and advanced attr(), which Chrome also supports (Safari to follow soon). https://css-tricks.com/quick-hit-176/

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

What’s !important #18: , Syntax ::highlight()ing, named-feature(), and More Well, that’s a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What’s important (#18), bringing you the best content... https://css-tricks.com/whats-important-18/

Quick Hit #175 Safari TP 251 trials comma-separated @container queries in addition to popover=hint. https://css-tricks.com/quick-hit-175/

Quick Hit #174 Safari TP 251 trials corner-shape, object-view-box, at-rule(), ident(), inherit(), random(), and random-item(). https://css-tricks.com/quick-hit-174/

We asked @wil.to what it is he likes about JavaScript. Knowing Mat, it's no surprise to hear him talk with affection for all its rough edges. "A little dust on the lens is all part of the charm" as he puts it. We've got a lot of time for this perspective. piccalilli.link/js4e-q-and-a-1

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. https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/

Quick Hit #173 Chrome 152 ships the autocorrect HTML attribute, making it Baseline, and the alpha() CSS function (Safari and Firefox are to follow shortly). https://css-tricks.com/quick-hit-173/

MicroLighter: Syntax Highlighter Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave. https://css-tricks.com/microlighter-syntax-highlighter/

Resolved: CSS Class Prefix Selector A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*. https://css-tricks.com/resolved-css-class-prefix-selector/

Well done, @dxnny.fun!

WordPress.com Student Plan As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project to demonstrate the myriad skills covered over the course of a semester — HTML, CSS, design, hosting,... https://css-tricks.com/wordpress-student-plan/

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

Quick Hit #172 Firefox 154 ships sibling-count(), sibling-index(), text-box-trim, text-box-edge, and text-box, which are now Baseline. https://css-tricks.com/quick-hit-172/

Summing up what I think is a delightful discourse sparked by @lea.verou.me on a UI/UX topic that's needed some revisiting. css-tricks.com/dark-mode-to...

What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot... https://css-tricks.com/whats-important-17/

Quick Hit #171 Chrome 154 (Dev) trials frame-sizing (for responsive iframes). https://css-tricks.com/quick-hit-171/

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. css-tricks.com/blocked-aria...

Very clever examples from @preethisam.bsky.social animating border-image. Super easy to forget it's animatable in the first place. That radial gradient one is just... 😍 css-tricks.com/animating-cs...

Compiled some notes on the <dialog> element — feel free to add yours to it! css-tricks.com/using-and-st...

I've been meaning to look into ::highlight() for a while and this is just the run down I was looking for. A great read from @sunkanmifafowora.bsky.social.

Going live at twitch.tv/wiltostreams / youtube.com/live/h86h-Ck... in fifteen to bash out tomorrow’s JavaScript for Everyone newsletter. I’m burnt out on writing about The Writing, so let’s make this one a mini-lesson, on the house — come join, and bring your JavaScript questions and topic requests.

Do you miss community forums? Like, you would use one if it was available and related to something you're interested in / have questions about? We had one for many years. I haven't been tempted to restart it because it seems like more effort than community benefit... maybe?

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 @patrickbrosset.com did for us a while back to demo what's new. css-tricks.com/css-gap-deco...

What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More Similar to last time, What’s !important #15 is pretty stacked — read all about boundary-aware CSS, making grid lanes accessible, creating time-based web designs,... https://css-tricks.com/whats-important-15/

Quick Hit #159 Firefox 154 (Nightly) will ship text-box, text-box-trim, and text-box-edge, making them Baseline. https://css-tricks.com/quick-hit-159/

We’re taking a little break, folks — time to go outside, swim in the lake, touch the grass, and admire the wonderful art that’s painted in the sky each and every day. See you in a few weeks! Be well and keep being awesome.

Quick Hit #158 Safari TP 247 becomes the first to trial calc-mix(), which returns a progress point between two values. https://css-tricks.com/quick-hit-158/

On July 4, 2007, Chris Coyier, a web designer, established the CSS-Tricks portal. The portal brings web designers daily news and tutorials from the world of web design. #WebDesignHistory

Quick Hit #157 Chrome 150 becomes the first to ship animatable zoom, flex-wrap: balance, overscroll-behavior: chain (chaining with no overscroll), named-feature(), corner rounding for polygon(), and finally, the focusgroup attribute. https://css-tricks.com/quick-hit-157/

It's Reading List 360, chums! brucelawson.co.uk/2026/reading...

Quick Hit #156 Chrome 150 implements comma-separated container queries as well as support for light-dark(), following Firefox support. https://css-tricks.com/quick-hit-156/

Quick Hit #155 Chrome 150 ships background-clip: border-area (supported by Safari already). https://css-tricks.com/quick-hit-155/