For more demos and links to polyfills, head over to MDN developer.mozilla.org/en-US/docs/W...
05.03.2026 14:16
👍 4
🔁 0
💬 0
📌 0
For more demos and links to polyfills, head over to MDN developer.mozilla.org/en-US/docs/W...
JavaScript Iterator․zip landed in Firefox 148, making it simple to loop over multiple things at the same time. Here's how it works:
It is! Here's the demo random-stuff.jakearchibald.com/heart-css-sh...
It uses linear() - one of the standards I worked on.
I also built a little tool to help generate spring easings linear-easing-generator.netlify.app
The UI as before, but with no button to suggest other tabs. The entry point has been removed.
If you have blocked AI enhancements, this is the same UI - the entry point to the feature isn't there.
And of course, any already-downloaded models are deleted.
"Create tab group" UI, including a "Suggest more of my tabs" button featuring an icon typically indicating AI.
The UI when you click the button. Showing "Nightly uses AI to read your open tabs' titles and descriptions to suggest more tabs and group names. This happens on your device". There are "cancel" and "continue" buttons, along with a link to customise AI settings.
Taking, for example, the tab grouping and naming feature, if you don't "Block AI enhancements", then you're offered the feature, and if you click the button, the use of AI is explained, and you have to confirm.
If you confirm, then the local privacy-preserving model is downloaded and used.
AI controls landed in Firefox 148, allowing you to control each feature individually, or block them all, and any future AI features.
Without the block active, AI features are offered, but don't run without confirmation steps.
Depends on the complexity. Those are really heavy dependencies, and in many cases the Web Animation API is good enough.
With CSS properties + shape(), you can animate the different points independently (as mentioned in the video). Is that possible with SVG along? I know you can animate from one path to another, but can individual points be animated in different ways?
hah, yeah, I mean shape-outside. CSS shape & SVG path can make the same curves, but it's the interaction with CSS units, functions, and animations (as in the video) where things get interesting.
In addition to the reasons given in the video, shapes can be used for other CSS features like offset-path and shape-around.
Ohh this SVG path to CSS shape() convertor (by @matthewmorete.com) 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-sh...
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.
The difference between shape() and polygon() is that shape() can do curves, whereas polygon() can only do straight lines.
Do you have a demo or something that uses path() and calc()? I'm not aware of how they can be used together. Other things like polygon() can, but I didn't think path() could.
The full docs on MDN developer.mozilla.org/en-US/docs/W...
And a handy tool to convert SVG paths css-generators.com/svg-to-css/
CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
I just did a search on the site in Firefox Nightly. I had to complete three CAPTCHAs, but then it worked.
Pulled separately from a Firefox CDN, and yes it's checked for updates. Bundling it with the browser definitely wouldn't seem opt-in.
The UI as before, but with no button to suggest other tabs. The entry point has been removed.
If you have blocked AI enhancements, this is the same UI - the entry point to the feature isn't there.
And of course, any already-downloaded models are deleted.
"Create tab group" UI, including a "Suggest more of my tabs" button featuring an icon typically indicating AI.
The UI when you click the button. Showing "Nightly uses AI to read your open tabs' titles and descriptions to suggest more tabs and group names. This happens on your device". There are "cancel" and "continue" buttons, along with a link to customise AI settings.
Taking, for example, the tab grouping and naming feature, if you don't "Block AI enhancements", then you're offered the feature, and if you click the button, the use of AI is explained, and you have to confirm.
If you confirm, then the local privacy-preserving model is downloaded and used.
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/maki...
It feels doable, but I don't think there's one right now that conforms to the modern spec.
You can throw away innerHTML and replace it with the new setHTML(), which has a built-in sanitizer. Here's how it works:
The article has 7 links to MDN
The Sanitizer API landed in Firefox 148, along with element.setHTML().
This lets you fully configure how HTML strings are cleaned as they're parsed.
hacks.mozilla.org/2026/02/good...
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/M...
To use your "onions" metaphor, the flow for tab grouping is:
Firefox: Do you want tab grouping?
User: Ok
Firefox: It contains onions. Do you want it? Cancel/continue.
Whereas the AI controls lets you remove everything from the menu that contains onions.
I assume that you don't consider the "suggest more of my tabs" flow opt-in (a button click, an explanation, and an confirmatory button click).
What would need to change about it for it to count as opt-in for you?
Of course, "suggest more of my tabs" isn't there if you've disabled that feature (or all AI features) in AI controls.
