Hi, I'm Patrick, a product manager on the Edge team at Microsoft. I do developer relations, and work on a wide range of web platform technologies and tools. Previously, I worked at Mozilla, on the Firefox DevTools team.
I'm part of the Open Web Docs governing committee and a co-chair of the W3C WebDX community group. I also run DevTools Tips.

I have 20+ years of working experience with the web and have worked as a designer, web developer, software engineer, browser engineer, engineering manager, and product manager.

To get in touch, use the links to my social networks at the bottom of this page, or email me: patrickbrosset at gmail dot com.

Using CSS animations as state machines to remember focus and hover states with CSS only

I discovered this CSS-only trick to store the past :focus or :hover state of any element. Without JavaScript, you can style elements depending on whether they were ever focused or hovered. Here's how it works.

Abstract illustration of a CSS animation in the shape of a series of square that get incresingly rotated. The text reads: CSS animations as state machines.

Make custom elements behave with scoped registries

With custom elements, you canb build, share, and reuse UI components with their unique behaviors, making development easier. But when your app brings together different sets of custom elements, from different libraries, things can get messy, and name collisions can occur. Scoped custom element registries solve this issue! In this article on developer.chrome.com, Jayson and I introduce the new scoped custom element registries feature that's now available by default in Chromium-based browsers.

Two buttons with very different styling, demonstrating how scoped registries allow different custom element definitions with the same tag name.

Making keyboard navigation effortless

Introducing focusgroup! A new web platform feature which provides out of the box arrow key navigation for complex widgets like menus, menubars, tabs, groups of inputs, etc. Focusgroup is now testable in Edge, Chrome, and other Chromium-based browsers. Check it out!

An app UI mockup which contains a menubar, various switch controls, radio bottoms, and disclosure elements. An orange overlay highlights a hypothetical keyboard navigation flow across the UI.

Abusing CSS gap decoration for art

CSS gap decorations are coming soon! So, as usual, I wanted to use this new feature in a way that wasn't really intended, just for fun, and for learning. This demo uses several square CSS grids, with absolutely no content in them, and only gap decorations. The grids are rotated and stacked, and you can customize the decorations to create nice patterns.

Four abstract artworks, made of white lines and dots, in circular shapes, on a black background.

Springy file and folder selector with custom <select>

Playing with the new customizable <select> element again, for a file picker with springy animations. See this Chrome for developers blog post for more info.

A folder selector where the listed folders appear as a fanned out stack of folders.

Improving the experience of developing for the web, one feature at a time (FOSDEM 2026, Brussels)

As developers, we rely on open source data, sometimes without even realizing it. Imagine your job without reliable browser compatibility data, or without CI or debugging tools that understand the features you're using and the browsers you target. That would be a pretty bad experience. In this talk, I dive into the browser-compat-data, web-features, and Baseline projects, and show how they shape our experiences as developers. Talk description, slides, video recording.

Title slide of my talk, which is 'Improving the experience of developing for the web, one feature at a time', with he FOSDEM logo.

Masonry - The pretty grid you didn’t see coming (Smashing Conference, NYC)

A lightning talk to introduce the upcoming CSS Masonry layout implementation in Chromium browser, what it's really about, why it makes sense to use a built-in implementation, how to use it, but also how to keep track of new browser features like it.

Title slide, saying 'Masonry, the pretty grid you didn't see coming', and the SmasingConf logo below it.