Sign in

Firefox for Web Developers

@webdevs.firefox.com
3.1K followers 8 following 470 posts

Official Firefox account for people who build on the web. Learn about the things we're working on to grow and improve the web platform.

PostsRepliesMedia
Firefox for Web Developers @webdevs.firefox.com · 17h
If the panel for a source is focused, ctrl/cmd-w will close that panel, rather than the tab.
020
Firefox for Web Developers @webdevs.firefox.com · 29/09/2026
It's part of Interop 2026, so it's on its way. Although, scroll-driven-animations will land first.
060
Firefox for Web Developers @webdevs.firefox.com · 29/09/2026
Firefox 157 has landed, and includes a couple of useful CSS features: 🎉 at-rule() in @supports - lets you limit rules to browsers that support a given at-rule. 🎉 overscroll-behavior: chain - lets scrolling pass up to parent elements, but prevents UA effects like 'bounce' and overscroll. …And more!
developer.mozilla.org
Firefox 157 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 157 that affect developers. Firefox 157 was released on September 29, 2026.
25311
Firefox for Web Developers @webdevs.firefox.com · 28/09/2026
no, headingoffset=0 doesn't change anything. You'd need to use headingoffset=1 on each 'section' of your article to be able to use h1 everywhere.
000
Firefox for Web Developers @webdevs.firefox.com · 24/09/2026
Could you file this on bugzilla.mozilla.org/home and give me the link?
bugzilla.mozilla.org
Bugzilla Main Page
000
Firefox for Web Developers @webdevs.firefox.com · 14/09/2026
Here's the main ticket bugzilla.mozilla.org/show_bug.cgi... - it's part of interop 2026 so we're working on it.
bugzilla.mozilla.org
1860854 - (css-view-transitions-2) [Meta] Implement CSS View Transitions 2
NEW (nobody) in Core - CSS Parsing and Computation. Last updated 2026-08-20.
010
Firefox for Web Developers @webdevs.firefox.com · 12/09/2026
Yeah, the 'when' refers to individual parts of the custom property value. It is always computed to some degree.
000
Reposted by Firefox for Web Developers
Firefox for Web Developers @webdevs.firefox.com · 10/09/2026
When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles…
28426
Firefox for Web Developers @webdevs.firefox.com · 10/09/2026
This video came about because someone was making a circle of elements using rotate, then counter-rotating the first child within each of those (so the text was always straight). Because the property was unregistered, the counter-rotate wasn't working.
040
Firefox for Web Developers @webdevs.firefox.com · 10/09/2026
When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles…
28426
Firefox for Web Developers @webdevs.firefox.com · 09/09/2026
There are tests for things like websockets, so I don't see why there can't be more protocol stuff there. However, even if not, it can be proposed as an "investigation area", which aims to make something more testable.
000
Firefox for Web Developers @webdevs.firefox.com · 09/09/2026
Pretty much! There's also a proposal for lerp drafts.csswg.org/css-values-5...
drafts.csswg.org
CSS Values and Units Module Level 5
010
Reposted by Firefox for Web Developers
Jakob E @jakob-e.bsky.social · 08/09/2026
Great news 🤩 For anyone interested in how to use progress in fluid typography @matthewmorete.com made an excellent post about it here 👇 blog.master.dev/fluid-typogr...
blog.master.dev
Fluid Typography with progress()
With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past.
0106
Firefox for Web Developers @webdevs.firefox.com · 08/09/2026
Full docs on MDN: developer.mozilla.org/en-US/docs/W...
developer.mozilla.org
progress() CSS function - CSS | MDN
The progress() CSS function returns a <number> value representing the position of one value (the progress value) relative to two other values (the progress start and end values).
071
Firefox for Web Developers @webdevs.firefox.com · 08/09/2026
The CSS progress() function is now in all major engines! Here's how it works:
511818
Firefox for Web Developers @webdevs.firefox.com · 04/09/2026
Oooo good idea! File it as a focus area: github.com/web-platform... It's a great candidate, as it already has a spec and tests.
github.com
Build software better, together
GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.
100
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
haha I keep telling folks to add this one to the store! I'll link them to your post.
130
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
That isn't allowed - any value that uses attributes in some way cannot be used in a URL (fwiw this detail is in the video)
130
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
I used this recently in custom select, to pull the label attribute of an optgroup into an inner legend element. Yes, I could write some JS to do the same thing, but doing it in a couple of lines of CSS was much quicker and more reliable.
010
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
Not that specific one, but there's this shop.mozilla.com/products/fir...
shop.mozilla.com
Kit t-shirt
You saw Kit, and that was it.    Made by Everybody.World, this tee is for the ones who get it — the quiet joy of spotting Kit out in the wild.   It’s soft, relaxed and made to wear on repeat, with jus...
120
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
Interop 2027 is open for proposals! Is there a well-tested feature that you'd like to see cross-browser focus on next year? Submit it here: github.com/web-platform...
github.com
interop/proposal_guide.md at main · web-platform-tests/interop
web-platform-tests Interop project. Contribute to web-platform-tests/interop development by creating an account on GitHub.
53511
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
I had to speed it up a bit in post-production to get it until the 3 minute limit on bsky 😬
010
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
It's tricky because it's common to do progressive enhancement with CSS by embracing fallbacks, so an error panel might become noisy fast. The rules panel will tell you when the attr() rules doesn't match expected syntax though.
020
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
Yep! They'll likely ship together
050
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
Yeah, it's live. Changing attributes already triggers CSS changes via selectors, so I don't expect this to introduce performance concerns.
000
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
The full docs on MDN: developer.mozilla.org/en-US/docs/W...
developer.mozilla.org
attr() CSS function - CSS | MDN
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It…
091
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
CSS attr() now works on all properties in Firefox 155. Here's how it works, and how to get the most out of it:
1016725
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
Keep an eye on bugzilla.mozilla.org/show_bug.cgi...
bugzilla.mozilla.org
1836588 - (css-random) Implement CSS random() function
NEW (nobody) in Core - CSS Parsing and Computation. Last updated 2026-09-03.
1110
Firefox for Web Developers @webdevs.firefox.com · 02/09/2026
github.com/mozilla/stan... this is our current position. Basically, we're supportive, but with reservations.
github.com
FedCM (was WebID) · Issue #618 · mozilla/standards-positions
Request for Mozilla Position on an Emerging Web Specification Specification Title: Federated Credential Management API Specification or proposal URL: explainer specification TPAC2021 presentation (...
150
Reposted by Firefox for Web Developers
rem / Remy Sharp @remysharp.com · 02/09/2026
I love this tool @webdevs.firefox.com devtools - so useful in the browser as a drag and design tool. Also, new speaker drop… "drop", announcement I think…
A screenshot of Firefox DevTools with the Polygon shape tool enabled updating the CSS in real time.
171
Firefox for Web Developers @webdevs.firefox.com · 01/09/2026
Chrome doing it definitely raised the question of doing the same, but the reason is really because it gets features and fixes from "ready to go" to Release in half the time.
080
Firefox for Web Developers @webdevs.firefox.com · 01/09/2026
Major versions of Firefox now land every two weeks, so Firefox 155 dropped today with web platform features including: 🎉 Fully typed CSS attr() 🎉 CSS progress() 🎉 Promise.allKeyed() and allSettledKeyed() 🎉 Lots of new WebTransport stuff …And more! developer.mozilla.org/en-US/docs/M...
developer.mozilla.org
Firefox 155 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 155 that affect developers. Firefox 155 was released on September 1, 2026.
312113
Firefox for Web Developers @webdevs.firefox.com · 26/08/2026
This was another feature added by @sajidanwar.com 🎉🎉🎉
0142
Firefox for Web Developers @webdevs.firefox.com · 26/08/2026
You're adding all my favourite features!
050
Firefox for Web Developers @webdevs.firefox.com · 25/08/2026
And the full docs on MDN: developer.mozilla.org/en-US/docs/W...
developer.mozilla.org
sibling-index() CSS function - CSS | MDN
The sibling-index() CSS function returns an integer representing the position of the current element in the DOM tree relative to all its sibling elements. The returned value is the index number of…
1150
Firefox for Web Developers @webdevs.firefox.com · 25/08/2026
CSS sibling-count() and sibling-index() are newly available across engines! Here's how they work:
314925
Firefox for Web Developers @webdevs.firefox.com · 25/08/2026
That would be more of a server feature than a format feature.
100
Firefox for Web Developers @webdevs.firefox.com · 24/08/2026
JPEG XL is slated to ship in Firefox 157 next month! Here's how we're shipping it safely… hacks.mozilla.org/2026/08/inte...
hacks.mozilla.org
Intent to Ship: JPEG XL – Mozilla Hacks - the Web developer blog
A JPEG XL decoder is heading for Firefox 157! Here's how we're shipping it safely…
0507
Firefox for Web Developers @webdevs.firefox.com · 24/08/2026
Chrome also has an Intent to Ship, so support should land in both browsers within a week of each other groups.google.com/a/chromium.o...
groups.google.com
Intent to Ship: JPEG XL decoding support (image/jxl) in blink
0418
Firefox for Web Developers @webdevs.firefox.com · 24/08/2026
In a JPEG XL compatible browser (like Firefox Nightly), test how it renders progressively by moving the slider in this demo: random-stuff.jakearchibald.com/apps/partial...
random-stuff.jakearchibald.com
Partial image decoder
1333
Firefox for Web Developers @webdevs.firefox.com · 24/08/2026
Intent to ship: JPEG XL! This will be on-by-default in Firefox 157, which should become the main release version at the end of September. This includes key JPEG XL features like progressive rendering. groups.google.com/a/mozilla.or...
groups.google.com
Intent to ship: JPEG XL
As of Firefox 157 I intend to turn JPEG XL decoding on by default on all platforms. It has been developed behind image.jxl.enabled, which today is on by default on Nightly only, and has had a Firefox…
1036096
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
CSS issue: github.com/w3c/csswg-dr...
github.com
[css-inline-3] Does `text-box-trim` remove negative leading? · Issue #14328 · w3c/csswg-drafts
When the line-height is smaller than the font's ascent/descent, line boxes can have negative leading. If text-box-trim is applied to a block using a taller edge metric, does it remove this negative...
050
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
What should happen with text-box-trim and margin-trim when it comes to negative values? Do negatives 'trim'?
4366
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
I'm told this has been fixed now
110
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
Glad it made sense! It was a bit of a struggle to get it under 3 mins.
000
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
ideographic and ideographic-ink are supported in Firefox 145.
000
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
It doesn't "do nothing", it discards half-leading.
100
Firefox for Web Developers @webdevs.firefox.com · 20/08/2026
How do they become unreadable? In the video, when I trim to x-height, do the capitals become unreadable? Also, remember that padding is added in the example.
000
Firefox for Web Developers @webdevs.firefox.com · 19/08/2026
It looks like the toolbar has been customised. You can add the spacing back support.mozilla.org/en-US/kb/cus...
support.mozilla.org
Client Challenge
100
Firefox for Web Developers @webdevs.firefox.com · 19/08/2026
Follow along at bugzilla.mozilla.org/show_bug.cgi.... Some of the design of that feature is still in flux, but I mention it in tomorrow's video.
bugzilla.mozilla.org
1506241 - (margin-trim) Implement the margin-trim property from CSS Box Level 4
NEW (nobody) in Core - Layout. Last updated 2026-08-17.
120