Articles, labs, and talks about web technologies
The results to the State of CSS 2026 survey are now available. Here's my summary from the parts of the survey that are most relevant to my work on the web platform. My findings are almost entirely based on the free form comments which developers left in the survey. Features developers love Before we get all depressed and dive into pain points and missing features, let's start with some positive…
A little technique that uses container query units in CSS to draw fixed-size gap decorations.
Read the full article at https://blogs.windows.com/msedgedev/2026/07/07/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and-migrate-your-pwa-to-a-new-origin/
SVG is very cool for displaying graphics on the web but, like any web technology, there's always more we could be doing with it, whether it's fixing bugs and browser inconsistencies, adding new features to unlock new use cases, or improving performance. I wanted to learn more, so I asked around and analyzed a few different sources of developer signals on the topic. Here are the sources I used: SVG…
Web developers crave cross-browser compatibility, but browser engines don't always implement the same features, or not always to the same degree of quality. This page shows the number of tests (from the web-platform-tests project) which fail in just one browser engine. It also lists those tests. Fixing them would improve interoperability for web developers, and make the web a better place for…
Last week, at CSS Day , I presented on the topic of CSS Grid Lanes, an exciting new CSS layout feature coming to the web. One part, which I didn't talk about during the presentation, is how alignment works in CSS Grid Lanes. The reason I didn't talk about it is that alignment is still being implemented in Chromium, and after some quick testing, I believe it's also not fully implemented in Safari.…
The early web was a playground. The tools were limited, but we made things anyway, and constraints fueled our creativity. That spirit still matters, and that's how we push the web forwat. CSS has grown into something really powerful, and one of the features I'm most excited about is CSS Grid Lanes, aka CSS masonry. In this talk, I go deep into how it works, how it differs from Grid, what it can…
I recently spent time asking for and reviewing feedback about CSS layout. I'm interested in learning more about pain points which developers face with layout in CSS, and what they're missing. For the first part, pain points, I went over the results of the 2025 State of CSS survey , and focused specifically on grid and flexbox, which are the topmost responses to the Layout Pain Points question. For…
Read the full article at https://developer.chrome.com/blog/install-element-ot
A command-line tool for looking up web platform features. Search by keyword, check Baseline status, find MDN docs, specs, browser bugs, survey results, and more, from your terminal. Repo , NPM .
Morphing star shape using clip-path and the shape() function
I helped moderate a fun and engaging discussion panel about a slice of the history of the web at BlinkOn. For the first ever BlinkOn hosted by Microsoft, we wanted to focus on the times in-between IE and the Chromium-based Edge. Brian Kardell and I had the opportunity to welcome three guests who were at Microsoft during that time, and who had a lot of interesting stories from back then: Michael…
Read the full article at https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/
Read the full article at https://css-tricks.com/abusing-customizable-selects/
Recently, I was searching for a way to style an element depending on whether it was ever focused. I wanted to do this without JavaScript, just with CSS, because I was going to use it in a demo about the new focusgroup web platform feature . Focusgroup handles a lot of keyboard navigation logic for you, for free, with only an HTML attribute. So adding a bunch of JavaScript code to track past focus…
Read the full article at https://developer.chrome.com/blog/scoped-registries
Read the full article at https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/
CSS gap decorations are coming soon! So, as usual, I wanted to use this new feature in a way that wasn't really intended, just for fun, and for learning. This demo uses several square CSS grids, with absolutely no content in them, and only gap decorations. The grids are rotated and stacked, and you can customize the decorations to create nice patterns.
Masonry is a cool looking layout that can create visually stunning designs. It's not for every use case, that's for sure, but it has its place in a web designer's toolbox, and people have been wanting to do this for a long time. The good news is, masonry is finally getting implemented for real in browsers, and should be usable very soon thanks to display: grid-lanes; In this article, I want to…
Six months have pased since I wrote about WebMCP . Both an eternity in the world of AI, and a blink of an eye in the world of web standards. In my earlier post, I introduced the general idea: letting you, web developers, register tools on your pages so AI agents can use them. The proposal is still evolving, and I wanted to provide a quick update, as well as some corrections to my original post. If…
Read the full article at https://blogs.windows.com/msedgedev/2026/02/12/microsoft-edge-and-interop-2026/
As developers, we rely on open source data, sometimes without even realizing it. Imagine your job without reliable browser compatibility data, or without CI or debugging tools that understand the features you're using and the browsers you target. That would be a pretty bad experience. In this talk, I dive into the browser-compat-data , web-features , and Baseline projects, and show how they shape…
Playing with the new customizable <select> element again, for a file picker with springy animations. See this Chrome for developers blog post for more info.
Playing with the new customizable <select> element for an emoji picker. See this Chrome for developers blog post for more info.
Cityscape, inspired by this piece by Roni Kaufman
Fun makes learning better! Kids learn by having fun, and adults do too, we just forgot about it. When you're having fun, your brain is more engaged, more open to learning new things. And yet, as adult professionals, we forget that sometimes. It's all serious business, and that's just sad. Fun is how I learned to code for the web in the first place. I didn't know any programming as a kid (apart…
Today is the last day of 2025, which seems like a good time to look back and think about what I've done this year. This year, more than ever, I've continued to push for a web that's easier to build with, more capable, easier to discover, and better documented. I'm thankful to be able to do this work, something I enjoy and care deeply about. I talked about web technologies, a lot First in writing,…
The Million Dollar Homepage was a very successful and viral marketing stunt back in 2005. At the time, it was implemented by using a single image together with an image map . This silly experiment recreates the page by using a CSS grid layout instead.
Read the full article at https://blogs.windows.com/msedgedev/2025/12/09/making-complex-web-apps-faster/
Read the full article at https://www.htmhell.dev/adventcalendar/2025/8/
Creating an accessible and performant accordion component using recent HTML and CSS features only.
Read the full article at https://www.smashingmagazine.com/2025/12/masonry-things-you-wont-need-library-anymore/
Browse the available features and APIs of the web platform through this hierarchical task-based interface.
⚠️ Only works in Chromium-based browsers for now. This simple image editor lets you crop and zoom into an image using the CSS object-view-box property and its xywh() function. If you want this to be implemented across all browsers, upvote this issue .
A simple web page to test keyboard focusable scroller in browsers, which is a feature that makes scrollable containers focusable with the keyboard by default, without requiring a tabindex attribute.
Read the full article at https://piccalil.li/blog/perfecting-baseline/
In the event that you're still interested in quirks mode, here is a demo page that illustrates some of the differences between quirks mode and standards mode rendering in browsers.
Who says we need CSS at all? The default user-agent styles of HTML elements comes with variations in sizes and colors already. More than enough to get some cool stuff done! (Kidding obviously, this was done while waiting for my flight at the airport, just trying to kill time really.)
A lightning talk to introduce the upcoming CSS Masonry layout implementation in Chromium browser, what it's really about, why it makes sense to use a built-in implementation, how to use it, but also how to keep track of new browser features like it.
A test page for the PerformancePaintTiming API.
A list of all the resources you will need to learn more about the CSS Masonry proposal, to try it out in your own projects, and provide feedback.
WARNING: this page has lot's of rapidly moving parts. Animations are turned of if you've configured your system for reduced motion though. This is fun CSS animation, for no reasons other than today is Friday.
Read the full article at https://blogs.windows.com/msedgedev/2025/09/25/unlock-text-editing-use-cases-with-highlightsfrompoint/
Read the full article at https://developer.chrome.com/blog/clipboardchange
AI can often be pretty shitty, and this technology comes with very real risks for the world. But it seems like it's here to stay, and it also seems like developers really like using it as a tool for coding (see the State of JS 2024's AI tools question and the State of AI 2025's opinions question ). If we're to continue using AI as a coding tool, we absolutely should do this in a responsible…
In this lightning talk, I introduced the new CSS Gap Decorations proposal, a super simple yet powerful and customizable, way to draw separators between elements of a layout. CSS Gap Decorations give you the tools you need to convey your design vision, in a way that's easy to maintain, and adaptable.
Read the full article at https://blogs.windows.com/msedgedev/2025/02/13/microsoft-edge-and-interop-2025/
A list of all the resources you will need to learn more about the CSS gap decoration proposal, to try it out in your own projects, and provide feedback.
In this post, I'll introduce WebMCP , a proposal to let you, web developers, control how AI agents interact with your web pages. If this proposal is interesting to you, please let me know. I'm looking for early feedback ! AI agents and the web AI agents are sort of taking over the way we use computers. The way we do things on computers, whether it's doing tasks, or searching for information in…
Read the full article at https://developer.chrome.com/blog/masonry-update