Patrick Brosset

Developer experience PM @ Microsoft, working on Edge. Previously at Mozilla.  Husband and father of 3. [ he/him]

Website: https://patrickbrosset.com
Github: https://github.com/captainbrosset
DevTools Tips: https://devtoolstips.org
Bluesky: https://bsky.app/profile/patrickbrosset.com

Public Key

npub152kz2y0wqm24ewq7fnsfdqyth0agslpd7z0426zu62uqm76vy70s49te0s

NIP-05 Address

patrickbrosset_at_mas.to@momostr.pink

Profile Code

nprofile1qqs29tp9z8hqd42uhq0yecyksz9mh75g0sklp864dpwd9wqdldxz08cpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0ds3aqhep

Publishing to

saltivka.org

relay.damus.io

nos.lol

Author Public Key

npub152kz2y0wqm24ewq7fnsfdqyth0agslpd7z0426zu62uqm76vy70s49te0s

Show more details

Last Notes

2026-08-28 08:57:06 UTC

Wow, I had no idea. You can already test Open-UI's proposed native menu elements in Chromium (enable "Experimental Web Platform features" flag in about://flags first).
Full native menu bar support with just HTML code!
Read the explainer: https://open-ui.org/components/menu.explainer/
Demo: https://jsbin.com/qorupiwivu/1/edit?html,output
https://media.mas.to/media_attachments/files/117/172/294/724/454/884/original/70dfb09b8280e524.png

2026-07-06 16:05:32 UTC

Very clever @npub1ec6…t4g5 DevTools feature 🦊
When you go to a page from a file URL, with DevTools open, you can now map "https://firefox.localhost" to the file's parent folder.
So, now, I have "https://firefox.localhost" wired up to my Downloads folder. No servers. Thank you Firefox!
https://media.mas.to/media_attachments/files/116/873/872/131/975/260/original/07465f19e99f128f.png

2026-07-01 21:19:39 UTC

I love the web features explorer monthly update RSS feed.
Each month I get a little report about what became Baseline, and what browsers shipped that month 📆
Quick to read, to the point ⏩
RSS: https://web-platform-dx.github.io/web-features-explorer/release-notes.xml
https://media.mas.to/media_attachments/files/116/846/802/987/330/458/original/2bd26723125db9c5.png
https://media.mas.to/media_attachments/files/116/846/802/986/678/309/original/da5e181f483a311f.png

2026-06-25 13:16:37 UTC

CSS `field-sizing` is now Baseline Newly Available!
It replaces JS code we won't be missing.
https://web-platform-dx.github.io/web-features-explorer/features/field-sizing/

2026-06-22 08:15:06 UTC

Quick SVG survey 🗳️
What are your pain points with SVG? What features are missing? What bugs matter the most?

2026-06-15 12:55:54 UTC

The slides from my talk "Fun with CSS Grid Lanes", at #CSSDay, are available at https://patrickbrosset.com/talks/

2026-04-24 14:32:53 UTC

🌏🗣️ Localizing PWAs is about to get a whole lot better!
With manifest localization, you can now provide translations for your app name, description, icons, and more, which wasn’t possible before.
Shipping in Chromium 148.
Amazing work from Alexander Kyereboah on the Edge team.
➡️ https://developer.chrome.com/blog/manifest-localization

2026-03-11 15:32:39 UTC

Curious about custom <select>?
I wrote about some of my recent demos over at @npub1j5z…uqw3!
Take a look ✨ https://css-tricks.com/abusing-customizable-selects/
https://media.mas.to/media_attachments/files/116/211/255/466/651/448/original/aa2bddf16b8312eb.png
https://media.mas.to/media_attachments/files/116/211/257/666/168/189/original/1eb8bead884b937f.png
https://media.mas.to/media_attachments/files/116/211/259/769/593/070/original/5f9e3e6c8555dd1f.png

2026-01-06 09:49:51 UTC

Fun isn’t a distraction from learning, it’s how we learn best.
The web is still a playful playground: open a text editor, try something weird, learn something new.
Let's all keep the web fun, weird, and wonderful!
➡️ https://patrickbrosset.com/articles/2026-01-06-fun-with-the-web/
https://media.mas.to/media_attachments/files/115/847/498/800/511/505/original/4df1f9f8b3d7655e.png
https://media.mas.to/media_attachments/files/115/847/499/776/144/505/original/d953d974f444da71.png
https://media.mas.to/media_attachments/files/115/847/501/428/701/878/original/6ee0d5aa7a3b961c.png
https://media.mas.to/media_attachments/files/115/847/504/563/860/429/original/6e7d9c363d095ff0.png

2025-12-30 14:15:45 UTC

In 2005, The Million Dollar Homepage went viral. It let you buy ad space for $1 per pixel. People went crazy.
Reminiscing about this, I discovered it used a single <img> and an image map for ad links.
So, obviously, I had to create a version of it with CSS grid!
➡️ https://patrickbrosset.com/lab/million-dollar-grid/
https://media.mas.to/media_attachments/files/115/808/913/654/986/558/original/ca6282818d602324.mp4

2025-12-16 13:51:51 UTC

Trying to animate grid-row and grid-column to make an item move around a CSS grid.
It works great as long as I don't use a custom property for the grid size.
If I do, the item jumps between corners on Firefox. Works fine in Chromium.
Left: Chrome
Right: Firefox
See: https://codepen.io/captainbrosset/pen/YPqopPj?editors=0100
https://media.mas.to/media_attachments/files/115/729/568/699/537/096/original/85aa4059a2de0f52.mp4

2025-10-01 13:46:47 UTC

Based on last year's State of HTML, 60% of web developers find it challenging to keep informed of new web platform features, which I can definitely understand.
At the same time, I keep seeing newsletters and blogs that seem to be doing a great job at it.
What's missing for you?

2025-09-24 09:32:03 UTC

📢 The Interop 2026 proposal window is closing later today!
122 proposals have been created: https://github.com/web-platform-tests/interop/issues?q=is%3Aissue%20state%3Aopen%20label%3Afocus-area-proposal
Is anything missing from that list? Are there critical building blocks of the web which you need to work the same in all browsers?
If so, add it, or vote for it with a 👍!

2025-09-22 06:44:57 UTC

The URL Pattern API is now available across all major browser engines! It's now much easier to work with URLs.
See https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API for more info.

2025-09-16 11:43:31 UTC

The CSS Custom Highlight API lets you style **ranges** of text without creating new nodes in the DOM.
And now, with the new highlightsFromPoint() method, you can even find custom highlights under the cursor and unlock cool text editing experiences.
See https://developer.mozilla.org/docs/Web/API/HighlightRegistry/highlightsFromPoint
https://media.mas.to/media_attachments/files/115/213/792/051/456/759/original/58c0fd44c11ad5e8.mp4

2025-08-25 17:01:23 UTC

Starting to work on something cool: https://github.com/webmachinelearning/webmcp/blob/main/docs/explainer.md
As a web developer, if you think you should be given a say in how AI browsers use your app, then take a read!
I'll be digging into this more soon, but would love to hear any early feedback you might already have on this.

2025-07-02 12:14:49 UTC

- reply

Same here ... hopefully some storm tomorrow, bring that temperature down.
Hang in there.

2025-07-01 16:55:03 UTC

This still works on the web. Love that weird 20+ years old ideas are still implemented in browsers. Keep the web weird.
Thank you @npub1pu2…mhz5
https://media.mas.to/media_attachments/files/114/779/013/011/394/231/original/969138dea3c422b0.jpeg

2025-06-05 12:29:03 UTC

The ability to style grid and flex gaps is coming fast in a browser near you!
Bubbling with ideas for what this will be useful for!
Code: https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations
https://media.mas.to/media_attachments/files/114/630/733/381/444/276/original/6ad6523de798965e.png
https://media.mas.to/media_attachments/files/114/630/733/997/955/635/original/b91232b52364ad34.png
https://media.mas.to/media_attachments/files/114/630/734/502/451/708/original/1607bda518382ae3.png
https://media.mas.to/media_attachments/files/114/630/735/782/358/165/original/c7147af5c9c36cb1.png

2024-12-16 10:35:55 UTC

Scrollbar styling just became a whole lot better on the web!
The scrollbar-width and scrollbar-gutter CSS properties are now supported in the latest versions of Chrome, Firefox, Edge, and Safari.
December release notes: https://web-platform-dx.github.io/web-features-explorer/release-notes/december-2024/
Now we just need scrollbar-color and we're set. Come on Safari!
https://media.mas.to/media_attachments/files/113/662/057/092/149/219/original/abf9f20a6b91db2f.png

2024-12-10 08:15:59 UTC

Today I learned about Object.assign() and how it can make DOM node creation code look a bit more compact:
document.body.appendChild(
Object.assign(document.createElement('div'), {
style: 'color: red;',
className: 'foo bar',
textContent: 'Hello, world!'
})
);
Object.assign(target, source) copies all properties from source to target, and returns target.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

2024-12-06 09:51:24 UTC

- reply

~40% of my immediate fediverse circle doesn't know what an origin trial is. Probably fair to assume that at least 50% to 75% of web devs don't either.
Origin trials are a mechanism by which certain browsers let you use early experimental APIs in production, on your site, for some time.
This allows you to test the API early, as if it was already enabled.
And it helps us get feedback and make the API better for everyone.
Interested? See
https://developer.microsoft.com/microsoft-edge/origin-trials
and
https://developer.chrome.com/origintrials/

2024-12-05 14:19:04 UTC

Without looking it up, do you know what an "origin trial" is?

2024-12-04 14:07:57 UTC

- reply

it took me so long to wrap my head around these justify/align/place keywords, and the content/items/self suffixes too.
It finally clicked for me a few years ago, but still a bit of a struggle to remember when I need them.

2024-12-04 13:53:03 UTC

- reply

yes!
https://web-platform-dx.github.io/web-features-explorer/features/align-content-block/
https://developer.chrome.com/blog/align-content

2024-11-29 17:16:25 UTC

Experimenting with showing "vendor positions" on the web features explorer, on top of browser compat. This way you can see if a feature is held up because it hasn’t been implemented yet, or if the vendor opposes it.
Example: https://web-platform-dx.github.io/web-features-explorer/features/accelerometer/
https://media.mas.to/media_attachments/files/113/567/372/658/678/929/original/b412202fbad8d9a0.jpeg
https://media.mas.to/media_attachments/files/113/567/372/659/640/263/original/c409bd435e8bb94f.jpeg

2024-11-26 18:02:23 UTC

Is this how you feel when trying to keep track of new things on the web?
If so, what resources/tools help?
https://media.mas.to/media_attachments/files/113/550/566/481/178/838/original/d7e8d7328ea49763.png

2024-11-20 09:08:34 UTC

Care about IndexedDB read performance ⚡?
Check out Edge’s getAllRecords proposal, which allows for fast batch reads in either directions ➡️ https://patrickbrosset.com/articles/2024-11-19-even-faster-indexeddb-reads-with-getallrecords/
Feedback on the explainer is more than welcome!
https://media.mas.to/media_attachments/files/113/514/493/581/755/680/original/14ba22d7f701b1a4.jpeg

2024-11-13 09:03:26 UTC

The official results from the State of HTML 2024 survey are now live: https://2024.stateofhtml.com/en-US
including a conclusion from yours truly.
https://media.mas.to/media_attachments/files/113/474/837/194/288/991/original/4b157b6026714848.png

2024-11-05 08:44:38 UTC

- reply

Good news, Firefox 132 just shipped, which means that requestVideoFrameCallback is now supported across all browser engines!
https://web-platform-dx.github.io/web-features-explorer/features/request-video-frame-callback/

2024-10-29 17:13:59 UTC

The web Notifications API lets you alert users in a nice OS-integrated way.
But, what if you work on an audio/video calls app? Wouldn't you need slightly different notifications? Notifications that better convey the immediateness of a call? That have obvious Accept/Dismiss buttons?
On the Edge team, we have a solution for this:
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Notifications/notifications_actions_customization.md
And an implementation in Chromium.
If this is something you need, we'd love your feedback and questions: https://github.com/MicrosoftEdge/MSEdgeExplainers/issues
https://media.mas.to/media_attachments/files/113/391/827/050/835/897/original/e28cd46368a481c3.png

2024-10-19 18:34:57 UTC

- reply

YES, that’s exactly what I’ve been working on, on the side, together with my work on the WebDX community group:
Home page: https://web-platform-dx.github.io/web-features-explorer/ (see the various tabs for newly and widely)
Release notes: https://web-platform-dx.github.io/web-features-explorer/release-notes/
RSS: https://web-platform-dx.github.io/web-features-explorer/release-notes.xml

2024-10-10 17:40:04 UTC

First time in New York. In love with this city.
https://media.mas.to/media_attachments/files/113/284/340/684/533/930/original/f851656dd81bc186.jpeg
https://media.mas.to/media_attachments/files/113/284/340/521/188/607/original/fd9c00ee60c470e8.jpeg
https://media.mas.to/media_attachments/files/113/284/340/755/424/810/original/475d9f24c563fff5.jpeg
https://media.mas.to/media_attachments/files/113/284/340/775/940/700/original/726cde555156a774.jpeg

2024-10-09 13:00:42 UTC

Today is the LAST day to submit proposals for the Interop 2025 project.
But also, it's a great time to review the existing proposals and upvote the ones you care about!
Unleash your thumbs-up emojis at:
https://github.com/web-platform-tests/interop/issues?q=is%3Aopen+is%3Aissue+label%3Afocus-area-proposal

2024-10-04 09:13:24 UTC

Declarative Shadow DOM allows you to create your component's shadow DOM from HTML rather than JavaScript, making server-side rendered components possible.
(bonus: it's now in all browsers, since earlier this year).
A problem we've heard web devs talk about is the inability to share styles though. State of HTML 2023 gave pretty signals on this.
My Microsoft Edge colleagues have solution proposals for this!
➡️ https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md
We'd love your feedback! Feel free to open issue on the repo.

2024-09-19 14:42:03 UTC

The video.requestVideoFrameCallback() method is soon coming to all browsers. This means you'll soon be able to run code on every frame of a playing <video>, which can be useful to, for instance, update a <canvas> at the same time.
Here's a quick demo video showing how I used this to compute the average color of a video frame (by dropping the frame into a canvas and getting the image color data), and set the page's background color to it.
https://media.mas.to/media_attachments/files/113/164/735/622/145/281/original/5bf3430cd812f46b.mp4

2024-09-17 15:56:18 UTC

🌟 We now have an RSS feed 🌟
You can now subscribe to our web platform release notes at
https://web-platform-dx.github.io/web-features-explorer/release-notes.xml
Thank you [@azu_re](https://mstdn.jp/@azu_re ) for contributing that very useful feature.

2024-09-04 07:04:23 UTC

Need to store a lot data on the client-side, in a real database?
If you can afford it (if your users can pay the download cost/time), then know that SQLite is available as a WASM build, and can run in the browser.
It's backed by the Origin Private File System API (OPFS), which has been available in all browsers for 1,5 year (Firefox 111 was the last one to support).
Check it out https://sqlite.org/wasm/doc/trunk/index.md

2024-08-23 19:23:07 UTC

Heard of baseline? Not sure what it is?
I try to explain baseline, web-features, and the work we do on the WebDX community group in this very short video.
Take a look!
https://www.w3.org/2024/09/TPAC/demo-baseline.html

2024-08-13 08:07:50 UTC

Is Firefox bringing back support for PWAs?
Maybe:
https://connect.mozilla.org/t5/discussions/how-can-firefox-create-the-best-support-for-web-apps-on-the/m-p/60561

2024-08-12 07:05:52 UTC

Back at work after 3 weeks off. Wish me luck.