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/
Reposted by Patrick Brosset
// clears throat
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
January 6, 2026 at 11:27 AM
// clears throat
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
// taps mic
"One two three. Test. One two three"
"Welcome to CSS D ... no, I need more gravitas. Could you turn up the bass just a little bit?"
Reposted by Patrick Brosset
The first issue of the year is here!
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
January 8, 2026 at 10:53 AM
The first issue of the year is here!
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
While Apple's blog post about CSS Masonry/grid-lanes is making the rounds, in case you had missed it, we (Edge and Chrome) also have a testable version of it, and had published a similar article in 2025.
Brick by brick: Help us build CSS Masonry | Blog | Chrome for Developers
Help test the proposed masonry syntax in Chromium.
developer.chrome.com
January 8, 2026 at 9:44 AM
While Apple's blog post about CSS Masonry/grid-lanes is making the rounds, in case you had missed it, we (Edge and Chrome) also have a testable version of it, and had published a similar article in 2025.
Reposted by Patrick Brosset
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...
Reposted by Patrick Brosset
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
groups.google.com
January 6, 2026 at 2:36 PM
Gecko: Intent to Prototype: "Customizable Select"
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...
Reposted by Patrick Brosset
This has been in the making for over a year, and I'm super excited about the new Web Weekly site!
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. 🥰
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. 🫣
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. 🥰
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. 🫣
January 5, 2026 at 1:51 PM
This has been in the making for over a year, and I'm super excited about the new Web Weekly site!
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. 🥰
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. 🫣
Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. 🥰
webweekly.email
There are still some rough edges here and there, but it's about time to get it out. 🫣
An amazingly beautiful and well written piece about the Web We Want!
Publish your own site now! Do it!
Publish your own site now! Do it!
you’re right! it feels mostly awful to Go Online™, these days. the internet in a sad state, for reason after reason after reason. but there is a way to fix it; to trade the voidful howling for a quiet & joyful song.
here’s how to win the war for the soul of the internet, and build the Web We Want.
here’s how to win the war for the soul of the internet, and build the Web We Want.
A Website To End All Websites | Henry From Online
How to win the war for the soul of the internet, and build the Web We Want.
henry.codes
January 1, 2026 at 8:46 PM
An amazingly beautiful and well written piece about the Web We Want!
Publish your own site now! Do it!
Publish your own site now! Do it!
Reposted by Patrick Brosset
you’re right! it feels mostly awful to Go Online™, these days. the internet in a sad state, for reason after reason after reason. but there is a way to fix it; to trade the voidful howling for a quiet & joyful song.
here’s how to win the war for the soul of the internet, and build the Web We Want.
here’s how to win the war for the soul of the internet, and build the Web We Want.
A Website To End All Websites | Henry From Online
How to win the war for the soul of the internet, and build the Web We Want.
henry.codes
January 1, 2026 at 7:27 PM
you’re right! it feels mostly awful to Go Online™, these days. the internet in a sad state, for reason after reason after reason. but there is a way to fix it; to trade the voidful howling for a quiet & joyful song.
here’s how to win the war for the soul of the internet, and build the Web We Want.
here’s how to win the war for the soul of the internet, and build the Web We Want.
My 2025 in numbers.
I care deeply for the web and, this year, I've continued to push for a web platform that's easier to build for, better documented, easier to discover and use.
patrickbrosset.com/articles/202...
I care deeply for the web and, this year, I've continued to push for a web platform that's easier to build for, better documented, easier to discover and use.
patrickbrosset.com/articles/202...
Patrick - My 2025 in numbers
A look at some of what I've done in 2025, in numbers.
patrickbrosset.com
December 31, 2025 at 10:55 AM
My 2025 in numbers.
I care deeply for the web and, this year, I've continued to push for a web platform that's easier to build for, better documented, easier to discover and use.
patrickbrosset.com/articles/202...
I care deeply for the web and, this year, I've continued to push for a web platform that's easier to build for, better documented, easier to discover and use.
patrickbrosset.com/articles/202...
Reposted by Patrick Brosset
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-...
Reposted by Patrick Brosset
Latest data on Sodium Ion batteries:
- Half the cost of Lithium Ion
- 3-6 times longer cycle life
- Consistent charging performance -40C to +70C
- No thermal runaway
- Better energy density than Lithium Ion
- No Lithium or Cobalt
Game changer.
youtu.be/5YUeYbfkIts
- Half the cost of Lithium Ion
- 3-6 times longer cycle life
- Consistent charging performance -40C to +70C
- No thermal runaway
- Better energy density than Lithium Ion
- No Lithium or Cobalt
Game changer.
youtu.be/5YUeYbfkIts
CATL’s New Sodium Battery Lasts 5.8 Million Kilometres — 60% Cheaper Than Lithium
YouTube video by Ben Alexxander
youtu.be
December 30, 2025 at 2:43 PM
Latest data on Sodium Ion batteries:
- Half the cost of Lithium Ion
- 3-6 times longer cycle life
- Consistent charging performance -40C to +70C
- No thermal runaway
- Better energy density than Lithium Ion
- No Lithium or Cobalt
Game changer.
youtu.be/5YUeYbfkIts
- Half the cost of Lithium Ion
- 3-6 times longer cycle life
- Consistent charging performance -40C to +70C
- No thermal runaway
- Better energy density than Lithium Ion
- No Lithium or Cobalt
Game changer.
youtu.be/5YUeYbfkIts
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-...
Who's going to FOSDEM 26 (the free conference for free and open source software, in Brussels)?
There's a browser and web platform track, with lots of cool talks, including one from me on web-features, and other open-source data that improve the experience of developing on the web.
There's a browser and web platform track, with lots of cool talks, including one from me on web-features, and other open-source data that improve the experience of developing on the web.
FOSDEM 2026 - Browser and web platform
fosdem.org
December 29, 2025 at 9:26 AM
Who's going to FOSDEM 26 (the free conference for free and open source software, in Brussels)?
There's a browser and web platform track, with lots of cool talks, including one from me on web-features, and other open-source data that improve the experience of developing on the web.
There's a browser and web platform track, with lots of cool talks, including one from me on web-features, and other open-source data that improve the experience of developing on the web.
Reposted by Patrick Brosset
Welcome to the Marvellous Museum of Moribund Markup. You're in for a treat today, for I'll be guiding you through a brief history of an assortment of the more arcane esoteric elements of HTML past.
Take a look at what they were and what still remains of them.
www.htmhell.dev/adventcalend...
#HTML
Take a look at what they were and what still remains of them.
www.htmhell.dev/adventcalend...
#HTML
The HTML Elements Time Forgot - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
December 22, 2025 at 1:03 PM
Welcome to the Marvellous Museum of Moribund Markup. You're in for a treat today, for I'll be guiding you through a brief history of an assortment of the more arcane esoteric elements of HTML past.
Take a look at what they were and what still remains of them.
www.htmhell.dev/adventcalend...
#HTML
Take a look at what they were and what still remains of them.
www.htmhell.dev/adventcalend...
#HTML
Reposted by Patrick Brosset
CSS Weekly #630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
CSS Weekly Issue #630
Learn what upcoming CSS Masonry means for web developers, how to adjust perceived font weight in dark mode, how to create an adaptive SVG favicon, and more.
cssw.io
December 22, 2025 at 2:42 PM
CSS Weekly #630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
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...
Reposted by Patrick Brosset
It took a while (mainly due to the huge quantity of data collected on some questions!), but the #StateOfHTML 2025 survey results are now live!
2025.stateofhtml.com/en-US/
Big thanks to @lea.verou.me who not only designed the original survey back in 2023, but then came back this year to update it.
2025.stateofhtml.com/en-US/
Big thanks to @lea.verou.me who not only designed the original survey back in 2023, but then came back this year to update it.
State of HTML 2025
The 2025 edition of the annual survey about the latest trends in the HTML ecosystem.
2025.stateofhtml.com
December 16, 2025 at 7:06 AM
It took a while (mainly due to the huge quantity of data collected on some questions!), but the #StateOfHTML 2025 survey results are now live!
2025.stateofhtml.com/en-US/
Big thanks to @lea.verou.me who not only designed the original survey back in 2023, but then came back this year to update it.
2025.stateofhtml.com/en-US/
Big thanks to @lea.verou.me who not only designed the original survey back in 2023, but then came back this year to update it.
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.
Reposted by Patrick Brosset
On day 13 @lloydi.com presents one of my favourite debugging tools. #htmHellAdventcalendar
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Hell is other people's markup - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 13, 2025 at 8:53 PM
On day 13 @lloydi.com presents one of my favourite debugging tools. #htmHellAdventcalendar
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Reposted by Patrick Brosset
Safari 26.2 is here with 65 features + 165 bug fixes — including field-sizing, Navigation API, Largest Contentful Paint, command & commandfor, CHIPS opt-in partitioned cookies, scrollend event, random(), WebGPU in WebXR, scrollbar-color, hidden=until-found and much more! webkit.org/blog/17640/w...
WebKit Features for Safari 26.2
Safari 26.2 is a big release.
webkit.org
December 12, 2025 at 6:44 PM
Safari 26.2 is here with 65 features + 165 bug fixes — including field-sizing, Navigation API, Largest Contentful Paint, command & commandfor, CHIPS opt-in partitioned cookies, scrollend event, random(), WebGPU in WebXR, scrollbar-color, hidden=until-found and much more! webkit.org/blog/17640/w...
Reposted by Patrick Brosset
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.