Firefox for Web Developers

Firefox 148 is out now, and adds some great web platform features: 🎉 The HTML Sanitizer API 🎉 CSS shape() 🎉 Trusted Types 🎉 Nav API's addHandler 🎉 Iterator zip & zipKeyed 🎉 ancestorOrigins And more! developer.mozilla.org/en-US/docs/Moz…

@nektro bugzilla.mozilla.org/show_bug.cgi?i… - thanks again for the great demo of the issue.

@nektro Oh wow, yeah, that's not right. This is a great reproduction of the issue. I'll get a bug report together.

@FirefoxWebDevs ever seen a behavior like this before?

But also, read the deep-dive article keithcirkel.co.uk/too-much-color/

One of our engineers, Keith Cirkel made this game where you can measure your colour perception, and it's about to eat your time. My score is 0.0028 💅 (although I get different scores on different screens - my best is on my MacBook) keithcirkel.co.uk/whats-my-jnd/

@nektro Is it not possible to recreate the issue in fewer bytes?

@FirefoxWebDevs i get an http 413 JSON payload (1564350 bytes) is larger than allowed (limit: 1048576 bytes).

@eyal_shalev @jaffathecake Filing them which whichever browser you're seeing the slowness in. issues.chromium.org/issues - Chrome bugzilla.mozilla.org/home - Firefox webkit.org/reporting-bugs/ - WebKit There may be issues already.

@FirefoxWebDevs @jaffathecake Filling them where? Also, it wasn't an edge case it something. Every micro bench I could think of had array operations doing much faster.

JavaScript Iterator․zip landed in Firefox 148, making it simple to loop over multiple things at the same time. Here's how it works:

@eyal_shalev @jaffathecake Generally, these things start off being implemented with correctness as a priority, then speed is added later. Filing bugs with benchmarks for particularly slow cases is a good way to start.

@FirefoxWebDevs @jaffathecake I was really excited for the IteratorObject proposal (from a performance standpoint) but was very disappointed when I found its map-reduce functions perform MUCH worse (at least on V8) then their array counterparts. Do you know if any effort done to surface it?

@someoak2 Did you see this? x.com/FirefoxWebDevs…

@FirefoxWebDevs keen to see how the wasm push goes, so that some things just won't need js at all anymore

For more demos and links to polyfills, head over to MDN developer.mozilla.org/en-US/docs/Web…

Ohh this SVG path to CSS shape() convertor is better, as it lets you control the viewbox path-to-shape.netlify.app

Here's the heart demo random-stuff.jakearchibald.com/heart-css-shap… Note that the :hover applies to a wrapper, otherwise the clipped area is used for hit-testing - an old gotcha reminiscent of the Flash days.

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

@birch_js That's fair, although I think polygon() would be fine for that particular example.

@FirefoxWebDevs Although the above video focuses on other use-cases, CSS shape() is also the best (only?) way to implement layouts like this! See how the exclusion path is not a rectangle (which CSS float could cover) but a complex shape.

@jh3yy ohhh! That would be great! For this demo I used Inkscape and yqnn.github.io/svg-path-edito…. css-generators.com/svg-to-css/ is good, but it adjusts to the shape's bounding box which I didn't want (cc @ChallengesCss). Thankfully Claude was able to do a more direct conversion.

@FirefoxWebDevs love it – it's so good for responsive offset-path stuff 🙌 has anyone made a decent interactive "build a shape" playground yet? i started putting one together instead of a converter but it's not "quite there" 😅

WebAssembly is a second-class language on the web, but how can we make it first-class? WebAssembly Components could be the answer… hacks.mozilla.org/2026/02/making…

Here are the full docs developer.mozilla.org/en-US/docs/Web…

You can throw away innerHTML and replace it with the new setHTML(), which has a built-in sanitizer. Here's how it works: