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
Reposted by Patrick Brosset
And we’re hiring fireship.dev/jobs
Jobs at Fireship
fireship.dev
January 15, 2026 at 5:11 PM
And we’re hiring fireship.dev/jobs
Reposted by Patrick Brosset
A CSS `image-animation` property: groups.google.com/a/chromium.o.... The example below would pause all animated images (like GIFs), and only play them when hovering or focusing an image:
```css
img { image-animation: paused; }
img:hover, img:focus { image-animation: running; }
```
```css
img { image-animation: paused; }
img:hover, img:focus { image-animation: running; }
```
Intent to Prototype: CSS Image Animation
groups.google.com
January 15, 2026 at 9:36 AM
A CSS `image-animation` property: groups.google.com/a/chromium.o.... The example below would pause all animated images (like GIFs), and only play them when hovering or focusing an image:
```css
img { image-animation: paused; }
img:hover, img:focus { image-animation: running; }
```
```css
img { image-animation: paused; }
img:hover, img:focus { image-animation: running; }
```
Reposted by Patrick Brosset
Firefox 147 just landed & it's pretty huge in terms of web features:
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
Firefox 147 release notes for developers (Beta) - Mozilla | MDN
This article provides information about the changes in Firefox 147 that affect developers.
Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.
developer.mozilla.org
January 13, 2026 at 2:03 PM
Firefox 147 just landed & it's pretty huge in terms of web features:
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
Reposted by Patrick Brosset
click to drop cars at a cow field...
these little silly sites are the best part of the internet
→ screen.toys/roadtrip
these little silly sites are the best part of the internet
→ screen.toys/roadtrip
January 13, 2026 at 7:17 AM
click to drop cars at a cow field...
these little silly sites are the best part of the internet
→ screen.toys/roadtrip
these little silly sites are the best part of the internet
→ screen.toys/roadtrip
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.