82 articles by Daniel Schwarz.
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 that developers have produced over the last couple of weeks or so. What’s !important #18: <geolocation>, Syntax ::highlight()ing, named-feature(), and More originally handwritten and published with love on CSS-Tricks . You shou
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. Creating Web Widgets Using the Document Picture-in-Picture API originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
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 of really cool (CSS) stuff. What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Chrome 151 becomes the first to ship the <usermedia> element.
Safari TP 248 becomes the first to trial the no-clamp keyword for the progress() function.
Firefox 153 ships the Picture-in-Picture API, which is now Baseline.
Firefox 153 improves interoperability for muted and :muted, popover=hint, ::-webkit-scrollbar, and elements nested inside <select> elements.
Read all about boundary-aware CSS, accessible grid lanes, time-based web designs, full-bleed, the customizable select, and new web platform features.
Firefox 154 (Nightly) will ship text-box, text-box-trim, and text-box-edge, making them Baseline.
Safari TP 247 becomes the first to trial calc-mix(), which returns a progress point between two values.
Chrome 150 becomes the first to ship animatable zoom, flex-wrap: balance, overscroll-behavior: chain (chaining with no overscroll), named-feature(), corner
Chrome 150 implements comma-separated container queries as well as <image> support for light-dark(), following Firefox support.
Chrome 150 ships background-clip: border-area (supported by Safari already).
I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, this isn’t one to miss!
Chrome 150 implements the AccentColor/AccentColorText system-color keywords, making them Baseline.
CSS has always had pseudo-classes that style things based on user interactions. Recent features, however, are blurring the line between what CSS "listens" for and how they are alternatives to what Javascript typically listens for.
Firefox 154 (Nightly) ships progress(), advanced attr(), and a UI for <input type="time"> and <input type="datetime-local">.
Chrome 150 (Beta) and Firefox 154 (Nightly) trial the alpha() relative color CSS function.
Safari TP 246 becomes the first to trial the alpha() relative color CSS function.
Let's poke at the differences between scroll-driven and scroll-triggered animations.
Safari TP 246 trials scroll-state queries and word-break: auto-phrase (lacks Firefox support).
Safari TP 246 adds support for <image> values in light-dark() and three or more values in color-mix() (lacks Chrome support).
Firefox 152 implements field-sizing, which enables form controls to fit their content even as the user types, making it Baseline.
CSS functions, the alpha() function, Grid Lanes, some things about Dialog that you might not know, CSS Wordle, and more — this is What’s !important right now.
Firefox 150 shipped ariaNotify(), an alternative to ARIA live regions, but it lacks Safari support and is unreliable on macOS.
Safari TP 242 trials the more advanced version of attr() from CSS Values and Units Module Level 5.
Firefox 150 becomes the first to implement the newest version of color-mix() that accepts more than two <color>s, and light-dark() that accepts
Firefox 150 ships :muted and all other media-based pseudo-classes, but they lack support in Chrome.
Chrome 147 becomes the first to ship border-shape as well as the scroll range for view timelines.
Chrome 147 ships contrast-color() (the Color Level 5 version that only resolves to black or white), making it baseline.
Quiz: CSS or BS?
Safari TP 240 becomes the first to ship the revert-rule CSS keyword, which rolls the rule back to when it didn’t have its current value.
Firefox 149 and Safari 26.4 now allow for querying the @container name only.
Christian Alder’s sibling-index() color shades one-liner.
The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.
Bramus notes that background-image will soon support the light-dark() function.
For this issue we have random(), folded clip-path corners, anchored container queries, customizable select, scroll-triggered animations, and more.
Font Awesome are launching a Kickstarter campaign to transform Eleventy (11ty) into Build Awesome.
A new version of Chrome will be released every two weeks (instead of four) starting from September 2026.
Sure, we can select the <html> element in CSS with, you know, a simple element selector, html. But what other (trivial and perhaps useless) ways can we do it?
Safari TP 238 trials customizable <select>, which Chrome has fully implemented already.
Safari TP 238 trials :open, which would make it baseline (yes, really).
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
Firefox 148 makes shape() available without a flag, aligning with Chrome and Safari.
Chrome 145 enables % units for letter-spacing and word-spacing as well as overscroll-behavior for all scroll containers, now baseline.
This issue of What’s !important is dedicated to our friends in the UK, who are currently experiencing a very miserable 43-day rain streak. Presenting: the five most interesting things to read about CSS from the last couple of weeks. Plus, the latest features from Chrome 145, and anything else you might’ve missed. TL;DR: lots of content, but also lots of rain.
Chrome 145 finally ships text-justify, which is almost baseline now.
Chrome 145 becomes the first to ship customizable <select>, as well as column-wrap and column-height for better multicol layouts.
Una Kravets announces border-shape with a couple of cool demos.
Adam Argyle quickly outlines the upcoming customizable <select>.
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.
7 days left to cast your vote for the best GSAP-animated site of the year!
Manuel Matuzović shares his position-try-fallbacks CSS reset for ensuring that anchored elements always flip/never overflow.
Chrome 144 trials the <geolocation> HTML element, which is currently on the standards track.
Chrome 144 becomes the first to support ::search-text, a pseudo-element for selecting find-in-page text.
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 features, the releases are still pretty exciting for what’s normally a slow time of year, so without further ado, here’s what’s important from the last couple of weeks (or should I say the first couple o
[Penpot](https://penpot.app/?utm_source=SmashingMagazine&utm_medium=Article&utm_campaign=MCPserver) is experimenting with MCP (Model Context Protocol) servers, which could lead to designers and developers being able to perform tasks in Penpot using AI that’s able to understand and interact with Penpot design files. Daniel Schwarz explains how [Penpot MCP](https://github.com/penpot/penpot-mcp) serv
2026 is almost upon us. I know we’re all itching to see the clock strike midnight (cue The Final Countdown by Europe), but not without recapping the best CSS-related things that happened over the last two weeks!
Happy new year, from the CSS-Tricks team!
:near(<length>) has been proposed, which would match whenever the pointer is within a specified proximity of the element.