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
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.
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.
Reposted by Patrick Brosset
Btw you don’t need to be a web spec author or work for a browser vendor to contribute to this.
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
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 2:01 PM
Btw you don’t need to be a web spec author or work for a browser vendor to contribute to this.
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
Reposted by Patrick Brosset
In 2025, we systematically collected compat data for 28 browser releases:
Firefox 135 - 147
Chrome 133 - 144
Safari 18.4, 26, 26.2
We're keeping your compat tables up-to-date.
Firefox 135 - 147
Chrome 133 - 144
Safari 18.4, 26, 26.2
We're keeping your compat tables up-to-date.
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:32 PM
In 2025, we systematically collected compat data for 28 browser releases:
Firefox 135 - 147
Chrome 133 - 144
Safari 18.4, 26, 26.2
We're keeping your compat tables up-to-date.
Firefox 135 - 147
Chrome 133 - 144
Safari 18.4, 26, 26.2
We're keeping your compat tables up-to-date.
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.
Reposted by Patrick Brosset
Discover Dialog - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 10, 2025 at 8:20 AM
Reposted by Patrick Brosset
Oh wow that's just what I need!
December 9, 2025 at 5:38 PM
Oh wow that's just what I need!
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...
Reposted by Patrick Brosset
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 8, 2025 at 5:08 PM
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
Reposted by Patrick Brosset
On day 8 @patrickbrosset.com illustrates how the fact that HTML is so forgiving can be a blessing and a curse. #htmhellAdventCalendar
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
What's wrong with this HTML, and is it valid? - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 8, 2025 at 10:15 PM
On day 8 @patrickbrosset.com illustrates how the fact that HTML is so forgiving can be a blessing and a curse. #htmhellAdventCalendar
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Reposted by Patrick Brosset
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...
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...
On device AI, available as a built-in browser API continues to make its way in browsers.
The Translator API can now be tested in Edge Canary.
The Translator API can now be tested in Edge Canary.
Translate text with the Translator API - Microsoft Edge Developer documentation
Translate text between different languages by using an expert model that's built into Microsoft Edge, from JavaScript code in your website or browser extension.
learn.microsoft.com
December 5, 2025 at 8:11 AM
On device AI, available as a built-in browser API continues to make its way in browsers.
The Translator API can now be tested in Edge Canary.
The Translator API can now be tested in Edge Canary.
Reposted by Patrick Brosset
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/
Reposted by Patrick Brosset
Great to see this ( microsoftedge.github.io/Demos/css-ma... ) in action in Canary!
December 4, 2025 at 2:10 PM
Great to see this ( microsoftedge.github.io/Demos/css-ma... ) in action in Canary!
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/
@kevinpowell.co just caught up on your video about animating
. I wanted to put into practice the new details/summary stuff. And your video really helped me remind myself of the animation to auto things. So thank you!
Accordion component
patrickbrosset.com
December 3, 2025 at 6:20 PM
@kevinpowell.co just caught up on your video about animating
. I wanted to put into practice the new details/summary stuff. And your video really helped me remind myself of the animation to auto things. So thank you!
Reposted by Patrick Brosset
I wrote a little thing for the HTML Hell advent calendar from @matuzo.at — but on a good improvement to HTML rather than a hellish thing 🙂
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Speculation rules improvements - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 3, 2025 at 7:39 AM
I wrote a little thing for the HTML Hell advent calendar from @matuzo.at — but on a good improvement to HTML rather than a hellish thing 🙂
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...