Patrick Brosset
@patrickbrosset.com
Edge web platform PM @Microsoft. Previously @Mozilla. WebDX CG. OWD GC. Maintains @devtoolstips.bsky.social. Husband and father of 3. he/him
The Interwebs · patrickbrosset.com
The Interwebs · patrickbrosset.com
Although it came out at the end of the year, the album LUX by Rosalía easily wins my Best F’ing Album Of The Year Award. So many feels….
January 9, 2026 at 7:23 PM
Although it came out at the end of the year, the album LUX by Rosalía easily wins my Best F’ing Album Of The Year Award. So many feels….
CSS masonry (aka grid-lanes) has two orientations: rows and columns.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
January 9, 2026 at 5:52 PM
CSS masonry (aka grid-lanes) has two orientations: rows and columns.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
I'm trying to think of good metaphors...
Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.
Cityscape: a CSS art demo, inspired by @ronikaufman.bsky.social's piece at bsky.app/profile/roni...
➡️ patrickbrosset.com/lab/cityscape/
➡️ patrickbrosset.com/lab/cityscape/
January 8, 2026 at 5:31 PM
Cityscape: a CSS art demo, inspired by @ronikaufman.bsky.social's piece at bsky.app/profile/roni...
➡️ patrickbrosset.com/lab/cityscape/
➡️ patrickbrosset.com/lab/cityscape/
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!
➡️ patrickbrosset.com/articles/202...
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!
➡️ patrickbrosset.com/articles/202...
January 6, 2026 at 9:49 AM
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!
➡️ patrickbrosset.com/articles/202...
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!
➡️ patrickbrosset.com/articles/202...
In 2005, The Million Dollar Homepage went viral. It let you buy ad space for $1 a pixel. People went crazy.
Reminiscing about this, I discovered it used a single![]()
and an image map for ad links.
So, obviously, I had to create a version of it with CSS grid!
➡️ patrickbrosset.com/lab/million-...
Reminiscing about this, I discovered it used a single
So, obviously, I had to create a version of it with CSS grid!
➡️ patrickbrosset.com/lab/million-...
December 30, 2025 at 2:15 PM
In 2005, The Million Dollar Homepage went viral. It let you buy ad space for $1 a pixel. People went crazy.
Reminiscing about this, I discovered it used a single![]()
and an image map for ad links.
So, obviously, I had to create a version of it with CSS grid!
➡️ patrickbrosset.com/lab/million-...
Reminiscing about this, I discovered it used a single
So, obviously, I had to create a version of it with CSS grid!
➡️ patrickbrosset.com/lab/million-...
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: codepen.io/captainbross...
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: codepen.io/captainbross...
December 16, 2025 at 1:51 PM
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: codepen.io/captainbross...
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: codepen.io/captainbross...
Now this is cool! VoxCSS draws voxels by using CSS 3D cubes, but what's cool is they're organized in stacks of CSS grids along the Z axis.
December 15, 2025 at 4:02 PM
Now this is cool! VoxCSS draws voxels by using CSS 3D cubes, but what's cool is they're organized in stacks of CSS grids along the Z axis.
Friday fun with the web.
I made this with MathML and CSS only 📏📐
Kids learn by having fun. Fun makes everything better.
As adult professionals, we tend to forget this and take ourselves too seriously sometimes.
Make something silly today! I guarantee you'll learn something along the way.
I made this with MathML and CSS only 📏📐
Kids learn by having fun. Fun makes everything better.
As adult professionals, we tend to forget this and take ourselves too seriously sometimes.
Make something silly today! I guarantee you'll learn something along the way.
December 12, 2025 at 2:46 PM
Friday fun with the web.
I made this with MathML and CSS only 📏📐
Kids learn by having fun. Fun makes everything better.
As adult professionals, we tend to forget this and take ourselves too seriously sometimes.
Make something silly today! I guarantee you'll learn something along the way.
I made this with MathML and CSS only 📏📐
Kids learn by having fun. Fun makes everything better.
As adult professionals, we tend to forget this and take ourselves too seriously sometimes.
Make something silly today! I guarantee you'll learn something along the way.
The browser-compat-data project (used by MDN, caniuse, and tools) now has:
20,000 commits
1,123 contributors
465 releases
19,148 data entries
That's what comprehensive web compat data looks like.
And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.
20,000 commits
1,123 contributors
465 releases
19,148 data entries
That's what comprehensive web compat data looks like.
And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.
December 10, 2025 at 1:18 PM
The browser-compat-data project (used by MDN, caniuse, and tools) now has:
20,000 commits
1,123 contributors
465 releases
19,148 data entries
That's what comprehensive web compat data looks like.
And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.
20,000 commits
1,123 contributors
465 releases
19,148 data entries
That's what comprehensive web compat data looks like.
And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.
Making web apps faster 🚅
When things start to feel unresponsive, it might be due to delays and congestion in your cross-window/worker message queue.
The Edge team is proposing a new API to root cause this exact problem!
Take a read and let us know your thoughts: blogs.windows.com/msedgedev/20...
When things start to feel unresponsive, it might be due to delays and congestion in your cross-window/worker message queue.
The Edge team is proposing a new API to root cause this exact problem!
Take a read and let us know your thoughts: blogs.windows.com/msedgedev/20...
December 9, 2025 at 5:18 PM
Making web apps faster 🚅
When things start to feel unresponsive, it might be due to delays and congestion in your cross-window/worker message queue.
The Edge team is proposing a new API to root cause this exact problem!
Take a read and let us know your thoughts: blogs.windows.com/msedgedev/20...
When things start to feel unresponsive, it might be due to delays and congestion in your cross-window/worker message queue.
The Edge team is proposing a new API to root cause this exact problem!
Take a read and let us know your thoughts: blogs.windows.com/msedgedev/20...
What's wrong with this HTML code snippet? Is it valid?
Super happy to have been part of this year's @matuzo.at HTMHell Advent Calendar. Take a read to dive deep into HTML weirdness:
www.htmhell.dev/adventcalend...
Super happy to have been part of this year's @matuzo.at HTMHell Advent Calendar. Take a read to dive deep into HTML weirdness:
www.htmhell.dev/adventcalend...
December 8, 2025 at 8:18 AM
What's wrong with this HTML code snippet? Is it valid?
Super happy to have been part of this year's @matuzo.at HTMHell Advent Calendar. Take a read to dive deep into HTML weirdness:
www.htmhell.dev/adventcalend...
Super happy to have been part of this year's @matuzo.at HTMHell Advent Calendar. Take a read to dive deep into HTML weirdness:
www.htmhell.dev/adventcalend...
I know it's not 2026 yet, but we can have nice things!
🪗 Here's an accordion component that only uses web platform built-in HTML and CSS features. No need for JS code, no component library.
🔗 patrickbrosset.com/lab/accordion/
🪗 Here's an accordion component that only uses web platform built-in HTML and CSS features. No need for JS code, no component library.
🔗 patrickbrosset.com/lab/accordion/
December 4, 2025 at 2:11 PM
I know it's not 2026 yet, but we can have nice things!
🪗 Here's an accordion component that only uses web platform built-in HTML and CSS features. No need for JS code, no component library.
🔗 patrickbrosset.com/lab/accordion/
🪗 Here's an accordion component that only uses web platform built-in HTML and CSS features. No need for JS code, no component library.
🔗 patrickbrosset.com/lab/accordion/
Putting this early experiment out there for feedback: patrickbrosset.com/lab/web-feat...
It lets you browse APIs and features of the web platform in a hierarchical catalog of web development tasks.
The tasks names/groups themselves can be improved. I'm mostly interested in whether this is useful.
It lets you browse APIs and features of the web platform in a hierarchical catalog of web development tasks.
The tasks names/groups themselves can be improved. I'm mostly interested in whether this is useful.
December 1, 2025 at 6:24 PM
Putting this early experiment out there for feedback: patrickbrosset.com/lab/web-feat...
It lets you browse APIs and features of the web platform in a hierarchical catalog of web development tasks.
The tasks names/groups themselves can be improved. I'm mostly interested in whether this is useful.
It lets you browse APIs and features of the web platform in a hierarchical catalog of web development tasks.
The tasks names/groups themselves can be improved. I'm mostly interested in whether this is useful.
Among other things, the object-view-box CSS property makes image editors super easy to implement (once you figure out the zoom/pan maths).
➡️ object-view-box: xywh(100px 70px 300px 200px);
👍 this issue if you need this feature in all browsers 🔗 github.com/web-platform... (Chromium only for now)
➡️ object-view-box: xywh(100px 70px 300px 200px);
👍 this issue if you need this feature in all browsers 🔗 github.com/web-platform... (Chromium only for now)
November 27, 2025 at 5:05 PM
Among other things, the object-view-box CSS property makes image editors super easy to implement (once you figure out the zoom/pan maths).
➡️ object-view-box: xywh(100px 70px 300px 200px);
👍 this issue if you need this feature in all browsers 🔗 github.com/web-platform... (Chromium only for now)
➡️ object-view-box: xywh(100px 70px 300px 200px);
👍 this issue if you need this feature in all browsers 🔗 github.com/web-platform... (Chromium only for now)
On the WebDX CG, we're trying something new to capture signals from y'all on features you need but aren't supported in all browsers.
When you visit caniuse.com, webstatus.dev, or the web features explorer, you might see a 👍 icon.
Need that feature? Click the icon to signal your interest!
When you visit caniuse.com, webstatus.dev, or the web features explorer, you might see a 👍 icon.
Need that feature? Click the icon to signal your interest!
November 25, 2025 at 1:51 PM
On the WebDX CG, we're trying something new to capture signals from y'all on features you need but aren't supported in all browsers.
When you visit caniuse.com, webstatus.dev, or the web features explorer, you might see a 👍 icon.
Need that feature? Click the icon to signal your interest!
When you visit caniuse.com, webstatus.dev, or the web features explorer, you might see a 👍 icon.
Need that feature? Click the icon to signal your interest!
Temporal you ask? In all browsers you ask?
Well, I'm told it's coming to Chrome/Edge 144. So, like, very very soon (as in, January).
It's already in Firefox. And being implemented in Safari too.
Well, I'm told it's coming to Chrome/Edge 144. So, like, very very soon (as in, January).
It's already in Firefox. And being implemented in Safari too.
November 21, 2025 at 1:56 PM
Temporal you ask? In all browsers you ask?
Well, I'm told it's coming to Chrome/Edge 144. So, like, very very soon (as in, January).
It's already in Firefox. And being implemented in Safari too.
Well, I'm told it's coming to Chrome/Edge 144. So, like, very very soon (as in, January).
It's already in Firefox. And being implemented in Safari too.
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
November 21, 2025 at 1:24 PM
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
I love it when I receive the monthly web platform update from the web-features explorer in my RSS reader. Such a useful and condensed source of info.
Web: web-platform-dx.github.io/web-features...
RSS: web-platform-dx.github.io/web-features...
Web: web-platform-dx.github.io/web-features...
RSS: web-platform-dx.github.io/web-features...
November 4, 2025 at 11:09 AM
I love it when I receive the monthly web platform update from the web-features explorer in my RSS reader. Such a useful and condensed source of info.
Web: web-platform-dx.github.io/web-features...
RSS: web-platform-dx.github.io/web-features...
Web: web-platform-dx.github.io/web-features...
RSS: web-platform-dx.github.io/web-features...
These are screenshots from an HTML page that doesn't use CSS at all.
Whatever, I'm waiting for my flight at the airport, don't mind me.
patrickbrosset.com/lab/html-sty...
Whatever, I'm waiting for my flight at the airport, don't mind me.
patrickbrosset.com/lab/html-sty...
October 9, 2025 at 11:39 PM
These are screenshots from an HTML page that doesn't use CSS at all.
Whatever, I'm waiting for my flight at the airport, don't mind me.
patrickbrosset.com/lab/html-sty...
Whatever, I'm waiting for my flight at the airport, don't mind me.
patrickbrosset.com/lab/html-sty...
Manhattan this morning.
October 7, 2025 at 10:25 PM
Manhattan this morning.
Oh and, @smashingconf.com is a really cool conference by the way. The team is awesome, and the speaker line-up for next week is incredible.
Microsoft Edge is super happy to be a partner once again.
Check it out: smashingconf.com/ny-2025
Microsoft Edge is super happy to be a partner once again.
Check it out: smashingconf.com/ny-2025
September 30, 2025 at 3:00 PM
Oh and, @smashingconf.com is a really cool conference by the way. The team is awesome, and the speaker line-up for next week is incredible.
Microsoft Edge is super happy to be a partner once again.
Check it out: smashingconf.com/ny-2025
Microsoft Edge is super happy to be a partner once again.
Check it out: smashingconf.com/ny-2025
A Kanban board demo which uses experimental CSS Masonry support in Chromium, and View Transitions.
Learn more: github.com/MicrosoftEdg...
Learn more: github.com/MicrosoftEdg...
September 18, 2025 at 12:25 PM
A Kanban board demo which uses experimental CSS Masonry support in Chromium, and View Transitions.
Learn more: github.com/MicrosoftEdg...
Learn more: github.com/MicrosoftEdg...
View transitions for the win.
September 18, 2025 at 12:22 PM
View transitions for the win.
A Kanban board using CSS Masonry, because why not.
The upcoming CSS Masonry lets you size columns separately and place items in specific columns.
Masonry isn't just about randomly sorted photo galleries!
This, and other demos, at github.com/MicrosoftEdg...
The upcoming CSS Masonry lets you size columns separately and place items in specific columns.
Masonry isn't just about randomly sorted photo galleries!
This, and other demos, at github.com/MicrosoftEdg...
September 18, 2025 at 9:35 AM
A Kanban board using CSS Masonry, because why not.
The upcoming CSS Masonry lets you size columns separately and place items in specific columns.
Masonry isn't just about randomly sorted photo galleries!
This, and other demos, at github.com/MicrosoftEdg...
The upcoming CSS Masonry lets you size columns separately and place items in specific columns.
Masonry isn't just about randomly sorted photo galleries!
This, and other demos, at github.com/MicrosoftEdg...
Vibe coding our ways through every problem isn't a very responsible thing to do.
Let's be more responsible. But also, if we're going to keep using AI coding tools, let's demand more from them!
Reflecting on this over at patrickbrosset.com/articles/202...
Let's be more responsible. But also, if we're going to keep using AI coding tools, let's demand more from them!
Reflecting on this over at patrickbrosset.com/articles/202...
September 16, 2025 at 7:44 PM
Vibe coding our ways through every problem isn't a very responsible thing to do.
Let's be more responsible. But also, if we're going to keep using AI coding tools, let's demand more from them!
Reflecting on this over at patrickbrosset.com/articles/202...
Let's be more responsible. But also, if we're going to keep using AI coding tools, let's demand more from them!
Reflecting on this over at patrickbrosset.com/articles/202...