Safari Introduces Adaptive Dark Mode — A new (opt-in) feature added to the Safari 27.3 beta that automatically adapts light sites to dark ones. It's here because although around 40% of pages are loaded by users using dark mode, only 10% of page loads directly support it.

WebKit

Agents Didn’t Clear Your Plate. They Dumped Reviews on It — Your agents write PRs in minutes, then eat your afternoon in review. When did ‘saving time’ start to mean babysitting agents’ work? Meticulous verifies every UI change, with no developer effort. Devs at Dropbox & ElevenLabs have their afternoons back. You can too.

Meticulous sponsor

Modern CSS Might Make Your Front-End More Complex — Swapping JavaScript for container queries and :has() can cut your code down but introduce bugs elsewhere in your layout. Gabriel shares four examples, including why container-type can collapse flex items to zero width.

Gabriel Shoyombo

📊 Design Systems Should Be Fast by Default — Den benchmarks dropdowns and checkbox lists across ten popular design systems, diagnoses the slowdowns, and shares tests to catch regressions.

Den Odell

Native Masonry Layouts with CSS Grid Lanes — A practical guide to native masonry layouts with CSS Grid Lanes, covering placement, fit-tolerance, horizontal layouts, subgrid and source-order accessibility. It's supported in only Safari right now, but other engines are working on it.

Saleh Mubashar

Making Features Generic in CSS — Rachel takes a look at the new flow-start and flow-end alignment keywords, and touches upon why the CSSWG often renames things.

Rachel Andrew

Embeddable Forms With Bookings, Live Pricing, and Payments Built In — Build it visually, paste two lines into any site. Unlimited submissions on every plan with spam protection. From €6/mo.

CraftForms sponsor

Quirks and Vintage Uses of CSS Table Display — Looks back at display: table and its related values, sharing what each does and the pre-flexbox tricks they enabled — while of course noting that you probably shouldn't reach for them today. A neat history lesson.

Declan Chidlow

🧡 If You Love a Website, Back It Up — Following one of their favorite websites disappearing, a web-archiving practitioner explains how to go about preserving sites for yourself. A practical tour of browser-based capture techniques, automated crawling, and embedding the results.

Misty De Meo

Spreading Liquid with Three.js — A technical walkthrough of a neat liquid-spreading effect (built for a cosmetics campaign). It shows off using a height map for thickness, a velocity map for movement, and fragment shaders to render the result. There's a satisfying demo to play with, too.

MISAKI NAKANO

How a Split Webfont Slowed Down Text Layout — A font splitter put i and j in a different file from the rest of the alphabet, forcing extra text-shaping work within words (causing INP to suffer). Here's why, plus a script to check your own font CSS.

Ivan Kristianto

Why Is the Analytics Tab the Slowest Page in Your App? — Usually it's one query scanning months of rows. TimescaleDB extends Postgres to make it fast. Get $1000 credit.

Tiger Data (creators of TimescaleDB) sponsor

Multi-Column Different-Speed Scrolling — There are some fun scrolling experiments here thanks to scroll-driven animations.

Chris Coyier

sidebearing-trim: Align Text by 'Visible Ink', Not by Glyph Boxes — You can try it out interactively on the page and there's a write-up of why you should care here. One of those things that designers, in particular, are likely to notice! 😅 GitHub repo.

Pekka Lammi

🎨 ColorSym: Symbols to Identify Colors 'When Color Alone Isn't Enough' — A way to use symbols to supplement colors, aiding with accessibility. The symbols are 'intelligent' where, for example, the orange symbol is a combo of those for red and yellow. Available as SVGs or a custom font.

Chris Eastridge & Luis Francisco

Astrotypes: Curated Font Pairings for Astro — Search and preview font pairings sourced from Google Fonts, Bunny CDN, and Fontshare live on the page. Each pair has a copy command for various tools (npm, Yarn, Bun, etc).

Michael Andreuzza

File Viewer: A Browser-Native Office, PDF, CAD, and Archive Viewer for Internal Web Apps — Provides read-only views for Office, PDF/OFD, CAD, archives, email and more, with integrations for React, Vue, and Svelte. There's also a live demo to try.

Flyfish Dev

Introducing Geist Serif — Vercel's Geist family gains a high-contrast display serif for headlines, built on the same metrics as Geist Sans so the two mix cleanly. Geist Sans, Geist Mono and Geist Pixel are on Google Fonts already; Serif isn't yet, but will be in due course.

Vercel