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.

Monitor and improve your web app’s load performance

large web applications are often assembled from many independent pieces, which all load their own data and resources. When all these pieces compete for the same network connection, congestion can build up and the user experience can suffer. On the Edge team, we're proposing the Network Efficiency Guardrails feature to help web developers monitor and optimize their web app's load performance.

App loads resources, then violations are reported, then the developer optimizes their site, then the app loads faster.

Abusing customizable selects

Web browsers ship new features all the time, but what fun is it if we can't build silly and fun things with them? In this article, let's go over a few demos that I've made by using the new customizable <select> feature, and walk through the main steps and techniques that I've used to implement them.

A deck of cards, fanned out on a table.

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.

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.