iiinova — where your digital self keeps evolving

Patrick Brosset @patrickbrosset.com · 29/09/2026

Oh very nice! CSS Grid Lanes (aka Masonry) is enabled in Firefox Nightly (159) 😍 Wonder if this will "ride the trains" to the stable channel. Anyone know?

My computer screen, showing 2 Firefox windows, each one containing a different CSS Grid Lanes (aka Masonry) demo proving that the new layout system now works in Firefox. A third small window shows the About Firefox Nightly information, containing the version number 159.0a1.

2265

Patrick Brosset @patrickbrosset.com · 28/09/2026

Fancy tooltips that use popover and anchor positioning are great. But sometimes all you need is a trustworthy title HTML attribute for a text-only tooltip. 😭 Only problem is: it can't be styled! Do you want these tooltips to be stylable? Maybe with a ::tooltip pseudo. Let me know your use cases!

A light pink box with the text Hover me inside it. A tooltip is displayed next to it, with the text I'm a sad little tooltip. Please style me.

7324

Patrick Brosset @patrickbrosset.com · 24/09/2026

The call for Interop 2027 proposals is closing today. More than 100 proposals got created! Here are my favs 🤩 patrickbrosset.com/lab/interop-... Check them out!

40 colored squares with my favorite feature names.

2218

Patrick Brosset @patrickbrosset.com · 18/09/2026

Customizable selects are so 2025. Now is the time for styleable multi-thumb range controls! Great work by @utilitybend.com and Open UI. The <rangegroup> element is being prototyped in Chromium by our team. Can't wait to play with it, which you can do with: brechtdr.github.io/enhanced-ran...

Radial range control with 2 thumbs, allowing to select a range between 0 and 100. The selected range is 25 to 75.

2426

Patrick Brosset @patrickbrosset.com · 11/09/2026

Interop 2027 prep is now. Want to help? 1. Go to developer-signals.rviscomi.workers.dev 2. Sign-in using GitHub 3. Find features you need 4. Click the comment icon, add your use case 5. Submit There aren't many ways to tell browsers what you need and why you need them. That's a very effective one.

The website, showing a list of web features and a search tool. The title says Shape what browsers build next. The github sign-in button is highlighted as step 1. The speech bubble icon on one of the features is highlighted as step 2.

The website, a feature has been selected, and the Provide developer signal dialog is displayed. The use case text input field is highlighted as step 3. The workaround text input field is highlighted as optional. And the submit button is highlighted as step 4.

32311

Patrick Brosset @patrickbrosset.com · 01/09/2026

Had a pretty good week end. How was yours?

Marrow path on a green hill, with big mountains in the distance, and clear blue sky.

A person standing in front of a beautiful green mountain lake, with a mountain peak behind it.

The Mont Blanc mountain range in the distance.

A razor thin ridge, people walking on it, at top of a mountain covered with green grass.

080

Patrick Brosset @patrickbrosset.com · 28/08/2026

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: open-ui.org/components/m... Demo: jsbin.com/qorupiwivu/1...

Edge browser window, showing an HTML demo on the jsbin.com website. The demo shows HTML code on the left, with various menubar elements such as <menubar>, <submenu>, <menulist>, and <menuitem>. The live rendering is on the right, and shows a menubar with the File, Edit, View, Help items. The File item is expanded, showing a sub menu list, with its own items.

310812

Patrick Brosset @patrickbrosset.com · 27/08/2026

Super excited to be speaking at @oredev.org in November. I need to actually write the talk, but all the right ideas are there already, and this is a topic near to my heart. ✨ Fun never gets old: 30 years of creative constraints on the web ✨ So, join me in Malmö and play with the web.

Fun never gets old: 30 years of creative constraints on the web. Patrick Brosset.

051

Patrick Brosset @patrickbrosset.com · 24/08/2026

Join me September 17 at www.dotai.io, in Paris, and learn about how WebMCP puts developers back in control of agentic web browsing. (Also, get 20% off with the code "SPEAKER20"). #dotai #webmcp #web #ai

Patrick is a DotAI 2026 speaker! Developer Relations PM at Microsoft Edge. DotAI, the artificial intelligence conference for AI builders. September 17, Paris.

141

Patrick Brosset @patrickbrosset.com · 13/08/2026

Yesterday was a great day for looking at the sky. So I took the old camera out. Got some decent pictures of the partial eclipse, and some night skies, trying to get shooting stars, and ending up getting plane and satellite trails instead. One cool pic of the North Star showing the Earth's rotation.

Solar eclipse, with the moon blocking most of the sun from the lower left side. Black sky, white-yellow crescent sun.

Solar eclipse, with the moon blocking most of the sun from the bottom side. Black sky, orange crescent sun.

Night sky, lot's of stars, Milky Way partially visible, and many plan and satellite light trails.

Night sky. North Star I the center, appearing as fixed in the photo, while all other stars appear to rotate around it, showing the earth's rotation during this 10 minute long exposure photo.

270

Patrick Brosset @patrickbrosset.com · 12/08/2026

<input type="checkbox" switch> is coming to Chromium-based browsers! My team is currently adding the implementation at chromium-review.googlesource.com/c/chromium/s...

Two switches as seen on iOS. The first one has a default green background. The second one has a custom background set by using CSS.

216121

Patrick Brosset @patrickbrosset.com · 10/08/2026

Anyone here working on www.douyin.com/jingxuan? There's a bug with how the Window Controls Overlay feature is used in that PWA which prevents dragging the window, when the app is installed. It's an issue with how the `-webkit-app-region:drag` CSS property is used. #css #pwa

The PWA with devtools opened in the foreground, showing that element where the app-region CSS property is used.

043

Patrick Brosset @patrickbrosset.com · 06/08/2026

Baseline is not a ceiling 🙈 If you only use Baseline Widely Available ✅ features in your project, you’re missing out! So many features you can use with fallbacks or as progressive enhancements. Newly: web-platform-dx.github.io/web-features... Not Baseline: web-platform-dx.github.io/web-features...

2489

Patrick Brosset @patrickbrosset.com · 04/08/2026

Proud of this little trick. If you've started using CSS gap decorations, you might know you can inset the lines by some amount. Well, if you also use a CSS size container, you can inset the lines by, say, calc(50cqi - 2px) to get a 4px wide line! ➡️ patrickbrosset.com/lab/containe...

Centered fixed-width decoration
Code: rule-inset: calc(50cqi - 1rem);
4 paragraphs separated by centered red dot dividers.

1194

Patrick Brosset @patrickbrosset.com · 23/07/2026

Been quiet for a week, enjoying mountains. Quietness will continue until morale improves 😃

1260

Patrick Brosset @patrickbrosset.com · 16/07/2026

A new level of mind-blowing just dropped: css-dos.ahmedamer.co.uk Run MSDOS in the browser, 100% in CSS! There's a bit of compiler magic so it doesn't take 3 months to load, but there's an option to load the raw CSS instead if you want, which does crash the tab 😁

The browser tab crash message: this page is having a problem, with the error code being: STATUS_STACK_OVERFLOW.

1348

Patrick Brosset @patrickbrosset.com · 13/07/2026

CSS mixins are great for little utilities, to shorten the code and make it easy to reuse. Tailwind could be a really good candidate for a mixins refactor! Left: tailwind, styles all over your HTML 🤮 Right: mixins, same DRY reuse, plus separation of concerns, semantic HTML, and parameters.

HTML code for a card component, with a wrapper div, an image, an inner div, containing a div for a title, and a paragraph for some text. All elements have long class values that use many tailwind utility classes.

HTML code for a card component, with a wrapper div, an image, an inner div, containing a div for a title, and a paragraph for some text. The elements have short class values that are semantic (e.g. card and title). The snippet also contains a style tag which contains rules for the card and its children elements. Each rule uses a bunch of apply at-rules, which are used to apply mixins. The apply at-rules are named after tailwind utility classes.

6193

Patrick Brosset @patrickbrosset.com · 06/07/2026

Very clever @webdevs.firefox.com DevTools feature 🦊 When you go to a page from a file URL, with DevTools open, you can now map "firefox.localhost" to the file's parent folder. So, now, I have "firefox.localhost" wired up to my Downloads folder. No servers. Thank you Firefox!

Firefox DevTools banner reading: This document could also be loaded from https://firefox.localhost using DevTools Local Mode, which can be enabled in the settings panel.

1201

Patrick Brosset @patrickbrosset.com · 06/07/2026

Oh, what a way to start the week 😍 CSS mixins implementation is starting in Chromium, from my team at Microsoft.

GitHub issue from @thejohnjansen on the web-features repository, saying "I am creating a ChromeStatus entry for CSS-Mixins. Development is just starting on this at Microsoft."

410510

Patrick Brosset @patrickbrosset.com · 01/07/2026

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: web-platform-dx.github.io/web-features...

The NetNewsWire app on iPhone, showing the list of monthly updates from the feed. Each line starts with month, year, and the web platform update.

The NetNewsWire app on iPhone, showing the monthly update for June. Field-sizing is newly available. Canvas reset, cap unit, counter-set, and createImageBitmap are widely available.

0162

Patrick Brosset @patrickbrosset.com · 26/06/2026

Web dev challenge: use the 3 most recent Baseline Newly Available features to build a demo of some kind. - field-sizing - :open - container style queries Easy, they're all CSS things. field-sizing and :open both work with <select> elements. So, maybe some fun responsive drop-down.

Screenshot of the web platform features explorer, showing the 3 most recent Baseline Newly Available features: field-sizing, Container style queries, and :open.

1153

Patrick Brosset @patrickbrosset.com · 16/06/2026

😮🤩🥹 when some of your web heroes start following you on social media.

Bluesky notifications showing that Jeremy Keith, Rachel Andrew, Chris Coyier, Manuel Matuzovic, Mia, and Rebane started following me.

4290

Patrick Brosset @patrickbrosset.com · 12/06/2026

#cssday continued… Great chats with @schepp.dev and @erwinhofman.bsky.social, advanced CSS talks with @kizu.dev, learned a lot from @joshtumath.uk, got my brain melted by @html5test.com, and of course special thanks to @rgadellaa.bsky.social for fighting the good battle with @open-web-advocacy.org.

1152

Patrick Brosset @patrickbrosset.com · 12/06/2026

The wonderful smashing and BT folks @charismagic.bsky.social Jarijn and @marcthiele.com. My CSS personal hero @meyerweb.com. DevTools Swiss Army knife @kilianvalkhof.com. And of course the best organiser of all @quirksmode.org. And more to come, all at #cssday…

0142

Patrick Brosset @patrickbrosset.com · 12/06/2026

More #cssday friends! @sjoy.lol who gave a wonderful talk. @ohhelloana.blog the amazing MC. @kevinpowell.co who is everyone front-end best friend. And the one and only @una.im. Amazing to meet you all. And more to come…

2322

Patrick Brosset @patrickbrosset.com · 11/06/2026

Great conference, great people! My WebDX partners in @rviscomi.dev and @atopal.bsky.social. The one and only CSS documentarian @estelle.bsky.social. And the awesome @matuzo.at. Many more who I didn’t have a chance to get a selfy with, but will tomorrow.

2192

Patrick Brosset @patrickbrosset.com · 11/06/2026

Amazing talks for the first day at #cssday.

My badge in front of the stage at CSS Day.

160

Patrick Brosset @patrickbrosset.com · 10/06/2026

👋 Want to learn about and try CSS Grid Lanes (aka CSS Masonry)? 🎤 If so, join me on Friday for "Fun with Grid Lanes" at @cssday.nl (or watch the recording later, when it comes out). 🛝 Also check our many samples to learn about the syntax and possibilities: github.com/MicrosoftEdg...

Color studies. A webpage sample showing a 2 column layout with colorful artworks and descriptions next to them in a fluid layout.

The Daily Oddity. A news website layout, with densily packed articles, photos.

Streets of Seattle. A photo gallery with photos going from bottom up, then a title, then photos going from top down.

New York City. A photo gallery with a title in the middle of photos.

1114

Patrick Brosset @patrickbrosset.com · 09/06/2026

Oh, and, quick announcement too, I'll be at @oredev.org in November, later this year too. See you in Malmö!

Fun never gets old: 30 years of creative constraints on the web.

110

Patrick Brosset @patrickbrosset.com · 13/05/2026

Little side project! ⌨️ wf: a little command line tool to search for web features and associated data like browser compat/Baseline, docs, links to bugs, and more 📖 Install and learn more at www.npmjs.com/package/web-...

0154

Patrick Brosset @patrickbrosset.com · 11/05/2026

⭐ Making custom elements inherit native behaviors ⭐ Checkout our latest experiment ➡️ microsoftedge.github.io/Demos/platfo... This gives your custom elements native behaviors! For now we support form submission. Your <fancy-button> can now submit forms, no platform code duplication needed!

1226

Patrick Brosset @patrickbrosset.com · 30/04/2026

The shape() CSS function (which works with clip-path, border-shape, ...) is very cool! Supported across browsers, very flexible and powerful. Demo patrickbrosset.com/lab/shapes/ (Chromium-only sorry, using at-function in this one). Learn more developer.mozilla.org/docs/Web/CSS...

080

Patrick Brosset @patrickbrosset.com · 23/04/2026

Getting inspired by all the things the new CSS grid lanes layout can do. Like this bottom-up and top-down layout. Sure, this layout isn’t the best for when order is important. But, man, is it cool for visual creativity.

Seattle black and white photos. Photos above the title go up. Photos below it go down.

1204

Patrick Brosset @patrickbrosset.com · 23/04/2026

There are lots of web compat resources out there. Can-I-Use and MDN, to name the two obvious ones. But, there are way more things, and they're all interconnected somehow, and relying on some of the same data. Check out this really cool visualization: webcompat.dev

Graph with nodes being sites like MDN or caniuse.com, or data sources repos, etc.

0151

Patrick Brosset @patrickbrosset.com · 20/04/2026

Crossing the bridge by train. Good job Seattle!

010

Patrick Brosset @patrickbrosset.com · 03/04/2026

We'd like to adopt a logo for the WebDX community group (the group that's responsible for web-features data, which powers Baseline). We have 3 proposals from our community. Help us choose by voting at github.com/web-platform... with a 👍 on the one you prefer!

A series of little black dots which converge to a single line that leads to a green checkmark. WebDX Community Group is written below.

Stylized W and X letters, over each other, to create an abstract black and green sign. WebDX Community Group appears below it.

WDX letters. The W is black and green, the left part is black and the right part is green, making it look like a check mark. D is black. X is orange, and looks like a across. The checkmark and cross signs are circled in matching color circles.

153

Patrick Brosset @patrickbrosset.com · 17/03/2026

😪 Large web apps often fetch many resources at once, including 3rd party parts they don't control, creating slow UX. 💡 Network Efficiency Guardrails helps you catch and fix load bottlenecks. ℹ️ Check out our proposal to monitor and improve your app’s load perf: blogs.windows.com/msedgedev/20...

Illustration showing multiple pieces of a webapp, 3rd-party content, images, analytics, data, etc. all going through a single Network pipe, and, on the other side, a webpage with a part of it still loading.

030

Patrick Brosset @patrickbrosset.com · 11/03/2026

Achievement unlocked! Completed all upgrades.

Screenshot of the https://lyra.horse/css-clicker/ css clicker game, showing that all possible upgrades were applied.

030

Patrick Brosset @patrickbrosset.com · 11/03/2026

Tried lyra.horse/css-clicker/ by @rebane2001.bsky.social. Very impressive how far CSS has come.

Screenshot of the https://lyra.horse/css-clicker/ CSS-only clicker game.

130

Patrick Brosset @patrickbrosset.com · 11/03/2026

Curious about custom <select>? I wrote about some of my recent demos over at @css-tricks.com! Take a look ✨ css-tricks.com/abusing-cust...

A vertical column of folders with labels on the right fanned out and curving towards the right.

Circular options with icons around another circular item in the center with a star icon.

08123

Patrick Brosset @patrickbrosset.com · 09/03/2026

I feel like this is either very dumb or very clever. Either way, I blogged about it: Using CSS animations as state machines to remember focus or hover states in CSS only. patrickbrosset.com/articles/202...

Abstract illustration of a CSS animation in the shape of a series of square that get incresingly rotated. The text reads: CSS animations as state machines.

5399

Patrick Brosset @patrickbrosset.com · 04/03/2026

This demo doesn't use a single line of JS code to respond to the arrow keys. Movement of the player is handled 100% by the upcoming `focusgroup` HTML attribute! Focusgroup was definitely *not* made for this 😅 But, so cool to have this out of the box on the web. More ➡️ open-ui.org/components/s...

46716

Patrick Brosset @patrickbrosset.com · 04/03/2026

Soon across all browsers: CSS contrast-color()! It returns a color that has guaranteed contrast against an other color. Very useful for computing text color with enough contrast against an unknown background. Demo ➡️ codepen.io/captainbross... Docs ➡️ developer.mozilla.org/en-US/docs/W...

0212

Patrick Brosset @patrickbrosset.com · 25/02/2026

You'll never guess how I made these illustrations! (pssst: I'm using CSS gap decorations) Check out the source code ➡️ patrickbrosset.com/lab/gap-deco... ⚠️ This currently requires a recent Chromium browser.

Abstract geometric artwork with big white dots on black background.

Abstract circular geometric white dots on black.

Abstract black arrows in circles, on white background.

3316

Patrick Brosset @patrickbrosset.com · 23/02/2026

Embrace the chaos — The shape and flow of masonry layouts In which I ramble about what it means to think about the shape of a layout vs. the flow of items through this layout. ➡️ patrickbrosset.com/articles/202...

Abstract illustration of a masonry layout with arrows between items, showing the flow of items through the layout.

0106

Patrick Brosset @patrickbrosset.com · 29/01/2026

I can't stop playing with this ... Here is another CSS customizable <select> demo. I might write a blog post soon referencing the main techniques used here. #css #is #awesome

2316

Patrick Brosset @patrickbrosset.com · 27/01/2026

One more custom <select> demo, with a bunch of CSS transforms and animations. I can't get enough of this. So cool.

114820

Patrick Brosset @patrickbrosset.com · 26/01/2026

A few years ago, I was involved in the development of custom select, back when it was called <selectlist>. Now, it's just <select> and it comes with a bunch of CSS to make it do whatever you want, like this circular demo! Can't wait for broader support. web-platform-dx.github.io/web-features...

2261