What's New in WebKit in Safari 27 Beta — Apple’s WWDC is taking place this week, and Safari 27, coming to iPhone, iPad, and Mac users later this year, is now in beta. It's a big release with 58 new features, from customizable <select> elements to numerous new CSS properties and sizes="auto" support for <img> elements. ▶️ Jen Simmons presents a video roundup.

WebKit

How Building an HTML-First Site Doubled Our Users Overnight — After two costly failed rebuilds, a public-service application flow was rebuilt around HTML forms, backend-saved progress, and JavaScript used only where it helped, which doubled form completions overnight.

Alistair Davidson

Master Playwright: Testing & AI Workflows — Catch broken UIs before they ship. Learn Playwright E2E testing and build verification loops that keep agentic coding tools in check.

master.dev sponsor

Context-Aware Headings in HTML — Manuel explores a new experimental HTML feature called the headingoffset attribute, which allows us to dynamically adjust heading levels based on their nesting depth. “The implementation, as it stands, seems very sensible to me”.

Manuel Matuzović

The Fundamentals and Dev Experience of CSS @function — @function lets you define functions across stylesheets that return a value usable wherever CSS can use one. Jane finds today’s dev experience rough (and support is limited to Chromium-based browsers for now) but sees the potential.

Jane Ori

CSS is Filling the Gaps with Rules: A Way to Style Gaps in Grid and Flex — A detailed look at the extent of what gap decorations can do with code & demos, plus practical ideas of how to use the feature in practice.

Brecht De Ruyte

CSS Can Now Animate Between Pages: View Transitions Without JavaScript — How cross-document view transitions can bring app-like page transitions to any website with just one CSS rule, no JS needed.

David Krcek

Fix Bugs in Cursor with the Context Sentry Already Has — Pull your top issues in plain English, run Seer root cause analysis in the IDE, and apply the fix. Shorter debugging loop.

Sentry sponsor

You Probably Shouldn’t Be Annotating Focus Order — If your HTML is semantic and follows reading order, focus order takes care of itself.

Eric Bailey

Scrubbable Staggered Animation with CSS @function — A step-by-step look at using a mathematical formula to create a reusable, predictable staggered effect, be that for an animation, scroll progress, or any other input.

Ashutosh Biswas

The Field Guide to CSS Grid Lanes — The WebKit team has just launched this detailed guide to Grid Lanes. It’s a clearly structured set of interactive playgrounds and demos highlighting how this relatively new CSS feature can be used. A good reference worth bookmarking.

WebKit

NoLoJS: HTML/CSS Alternatives to Common JS Patterns — A growing collection of common JS patterns that can now be replaced with HTML, CSS, or very little JS. Think accordions, modals, lazy loading, etc.

Aaron T. Grogg

Catch the Regression Before Your Users Do — Stop finding out about perf regressions from App Store reviews. Observe surfaces within hours, tied to the build.

Expo sponsor

🔠 FontSelf: A Tool to Configure Google Fonts for Self-Hosting — You might be self-hosting fonts already, but this could help speed up the process. You can select and configure your chosen font, download a package, and get the CSS.

FontSelf

.MD This Page: A Browser Extension to Convert Any Web Page to Clean Markdown — Particularly useful for making content LLM-ready, removing ads, UI elements, etc. while maintaining a simple, clear hierarchy.

Adem Kouki

tsParticles 4: A Particle Engine for Web Effects — If you want a confetti cannon, fireworks (July 4 is coming up soon), ribbons, fireflies, snow, or similar effects on your pages, this is for you. You can see some live demos here.

Matteo Bruni