Quick Hit #76
State of HTML 2025 is now live!
Author
DS
Daniel Schwarz
82 articles by Daniel Schwarz.
82 articles by Daniel Schwarz.
State of HTML 2025 is now live!
Safari 26.2 ships command and commandfor as well as hidden=until-found, which are now supported in all web browsers.
Safari 26.2 ships sibling-index(), sibling-count(), and field-sizing, bringing them close to baseline.
The best CSS news from around the web from the last two weeks. In this edition: advent calendars, CSS Wrapped 2025, and the latest Web Platform Updates.
Firefox 146 becomes the first to trial @custom-media, an at-rule that’s like custom properties but for media queries.
How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?
Firefox 146 has shipped the CSS Color 5 version of contrast-color() that only resolves to black or white. Hopefully Chrome support and CSS Color 6
Responding to Wes Bos, Bramus demonstrates the different position-area values and how to handle inside corners (as there aren’t values for these).
@heyo53 asks on Bluesky: Is it okay to style or hide scrollbars?
Chrome 143 has introduced anchored fallback container queries to help us query the currently applied fallback position of anchored elements.
Black Friday might be over but you can still save big on any of Piccalilli's CSS, JavaScript, or UX courses until December 9th, 2025.
Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
With component variants, design systems become more flexible, letting you reuse the same component while adapting its look or state with ease. In this article, Daniel Schwarz demonstrates how design tokens can be leveraged to manage components and their variations using Penpot, the open-source tool built for scalable, consistent design.
The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.
When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when
The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.
The CSS if() function enables us to use values conditionally, but what exactly does if() do? Let's look at a possible real-world use case.
The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.
Web browsers are experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes come with some new events that we can listen for.
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the
I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers!
I’d like to show you some hacks to aid your web development workflow and how to convert those hacks into time-saving bookmarklets.