1,207 articles from CSS-Tricks.
The journey to create a polyfill for the upcoming CSS random() function that works in all browsers. Let’s Use the Emergent CSS random() Function in all the Browsers originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
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.
The CSS animation-trigger property allows you to delay the start of a CSS animation until a specific trigger occurs. animation-trigger originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave. MicroLighter: Syntax Highlighter originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Seven and half years after blocks arrived in Core, WordPress introduces a way to build blocks without React annd build pipelines. All you need is PHP. WordPress PHP-Only Block Registration originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-* . Resolved: CSS Class Prefix Selector originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for cross-document view transitions declarative in CSS rather than managing that stuff in JavaScript. CSS Navigation Matching, Early Days originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project. Hosting those projects has always been a roadblock though. WordPress.com Student Plan originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system. Dark mode toggles: two states are enough 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.
The warning is correct. And the recommended fixes you've probably seen are wrong. Here's what you can do instead to properly fix the issue. Blocked aria-hidden: The Warning is Right, and Every Fix You’ve Found is Wrong originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Border images are an overlooked feature. One neat fact is that border image slices can run across entire borders on an element, and animating it creates beautiful effects. Animating CSS border-image originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
Smashing Magazine’s in-person conferences are back and returning to the wonderful city of Freiburg next month, September 7–10. SmashingConf Freiburg 2026, September 7-10 originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it. Using and Styling the Dialog Element originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
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.
Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in
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).
There's a brand new ariaNotify() method — defined by the WAI-ARIA 1.3 Specification — that provides a means of programmatically triggering narration in a screen reader.
Safari TP 246 adds support for <image> values in light-dark() and three or more values in color-mix() (lacks Chrome support).
Props for That creates live props based things CSS can't normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity.
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.
One of those nuances to keep in your back pocket when writing for screen readers.
Mat Marquis on Google pulling the web standards equivalent of U2 album marketing:
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.
A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript.
Chrome 147 ships contrast-color() (the Color Level 5 version that only resolves to black or white), making it baseline.
Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain to your future self.
Quiz: CSS or BS?
Chrome 145 introduces the column-height and column-wrap CSS multi-column layout properties, enabling us to wrap the additional content into a new row.
These are the historical pranks I consider the top 10 most noteworthy, rather than the “best.” You’ll see that some of them crossed the line and/or backfired.
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.
Looking at research and experiments that are designed to automatically generate user interfaces based on user preferences.
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.
