Sajid Anwar @sajidanwar.com · 15h> Sadly, [typed arithmetic] still isn’t cross-browser (looking at you, Firefox). Fortunately, typed arithmetic is scheduled to ship in Firefox 158 🙂 www.firefox.com/en-US/firefo...firefox.comFirefox 010
Reposted by Sajid AnwarFirefox for Web Developers @webdevs.firefox.com · 29/09/2026Firefox 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.orgFirefox 157 release notes for developers (Stable) - Mozilla | MDNThis article provides information about the changes in Firefox 157 that affect developers. Firefox 157 was released on September 29, 2026. 25311
Reposted by Sajid AnwarIntentToShip @intenttoship.dev · 22/09/2026Gecko: Intent to Ship: CSS Typed Arithmeticgroups.google.comGecko: Intent to Ship: CSS Typed ArithmeticGecko: Intent to Ship: CSS Typed Arithmetic 0104
Sajid Anwar @sajidanwar.com · 21/09/2026Chrome does support the step argument, their implementation of random() should be pretty complete and up-to-date with the spec. ... well, the editor's draft spec (drafts.csswg.org/css-values-5...). The latest published version is outdated, it looks like (www.w3.org/TR/css-value...).drafts.csswg.orgCSS Values and Units Module Level 5 120
Reposted by Sajid Anwargamera obscura @ohrobin.bsky.social · 19/09/2026incredibly well-done resident evil teaser from a movie theater 80169205728
Sajid Anwar @sajidanwar.com · 17/09/2026The latest @firefoxnightly.bsky.social has CSS random() support enabled by default, please give it a try! I quite like the demos from @polypane.app here: polypane.app/blog/experim...polypane.appExperimenting with the new pure CSS random() function | PolypaneCSS is getting a random() function that lets you set properties with a random value, opening up a ton of interesting creative possibilities. In this article… 093
Reposted by Sajid AnwarIntentToShip @intenttoship.dev · 14/09/2026Gecko: Intent to Prototype: CSS random() math functiongroups.google.comGecko: Intent to Prototype: CSS random() math functionGecko: Intent to Prototype: CSS random() math function 0194
Reposted by Sajid AnwarFirefox for Web Developers @webdevs.firefox.com · 08/09/2026The CSS progress() function is now in all major engines! Here's how it works: 511818
Sajid Anwar @sajidanwar.com · 01/09/2026Aha, this is excellent, I didn't even think of it! Though hopefully I'll be able to get true typed arithmetic in Firefox in a month or two. 🙂 140
Reposted by Sajid Anwarpanamenina.bsky.social @panamenina.bsky.social · 27/08/2026Now that I've discovered honey on toast, I'm like Winnie Pooh Bear on this shit 011
Reposted by Sajid AnwarAlex Russell @infrequently.org · 27/08/2026That irresistible urge to rewatch Clue. 2121
Sajid Anwar @sajidanwar.com · 26/08/2026Thank you! So I added the alpha() relative color function and the progress() math function, those will be shipping in Firefox 155 very soon. In flight, I'm working on CSS Typed Arithmetic (developer.mozilla.org/en-US/docs/W...) which will let you multiply and divide dimensions, pretty neat!developer.mozilla.orgUsing CSS typed arithmetic - CSS | MDNCSS typed arithmetic refers to permitted calculations performed with typed CSS values via functions such as calc(), and specifically, to the behavior defined in the CSS values and units module. CSS ty... 201
Sajid Anwar @sajidanwar.com · 25/08/2026At this point I'm basically working on Firefox to chase the thrill of these videos releasing 3154
Reposted by Sajid AnwarFirefox for Web Developers @webdevs.firefox.com · 25/08/2026CSS sibling-count() and sibling-index() are newly available across engines! Here's how they work: 314925
Sajid Anwar @sajidanwar.com · 24/08/2026I do agree that more flexibility with the prefix would be nice. The specification does say "Other separators, like _, might be added as possibilities in the future", so I'm optimistic. Also see github.com/w3c/csswg-dr..., an issue exploring enhancements to the attribute selector capability.github.com[selectors] Modifier for attribute selectors to split values into words · Issue #14371 · w3c/csswg-draftsIn #10001 (comment) @paceaux suggested to introduce a new modifier w that changes the value matching to take word boundaries into account. Taking the example from that comment, the selector [class^... 200
Sajid Anwar @sajidanwar.com · 24/08/2026- You mention the existing attribute syntax (like [class*=" btn-"]) and that IDs should get this too. But classes are special because of the whitespace behavior of the attribute. I think .foo-* is certainly better than `:is([class^="foo-"], [class*=" foo-"])`. For IDs, `[id^="foo-*"]` seems fine. 300
Sajid Anwar @sajidanwar.com · 24/08/2026- BEM with double-hyphen is supported. Bramus' example in his post is just to show that the .foo-* doesn't match .foo--bar. But the spec is explicit that .foo--* would match (drafts.csswg.org/selectors-5/...). I think this is generally reasonable, e.g. .alert--heading and .alert-panel are unrelated.drafts.csswg.orgSelectors Level 5 200
Sajid Anwar @sajidanwar.com · 24/08/2026There's a couple errors in this that I think, once corrected, will make the selector seem at least a little more reasonable: - The * is not regex (if it were, .foo-* would actually mean zero or more hyphens *only*). It's not meant to be regex, it's just new syntax to learn and use. 200
Sajid Anwar @sajidanwar.com · 20/08/2026Like in this example - codepen.io/kbhomes/pen/... - when `text-box: trim-start cap text` is what the author selected, it seems wrong for the cap-height to not be aligned with the image in all cases. (Pen forked from @jensimmons.bsky.social which was extremely helpful during implementation!)codepen.io`text-box-trim`, negative leading, over alignment... 020
Sajid Anwar @sajidanwar.com · 20/08/2026My suspicion is that while it might be weird to discard negative leading for vertical centering use cases, not discarding it for top/bottom alignment would be *much* weirder. If you want to align a heading to an adjacent image, the intent would be that the trim edge is always respected (I think). 120
Sajid Anwar @sajidanwar.com · 19/08/2026Dream realized: Jake video about a feature I contributed to Firefox! 1160
Sajid Anwar @sajidanwar.com · 18/08/2026Hey, top billing for my text-box and sibling-* changes! 🥰 0103
Sajid Anwar @sajidanwar.com · 16/08/2026Yeah, these do work in both. But I think you're probably right, `::first-line` is already kind of really wonky across browsers. I'll try to get it into 155, plus the new 2-week cycle helps a lot. 110
Sajid Anwar @sajidanwar.com · 16/08/2026Filed bugs and patches for these: - Wrong line trimmed when `::first-line` exists: bugzilla.mozilla.org/show_bug.cgi... - Wrong trim metric used if `::first-line` changes the font: bugzilla.mozilla.org/show_bug.cgi... Tagged these as Firefox 154 defects, wonder if I should uplift when they land?bugzilla.mozilla.org2063909 - [text-box-trim] Wrong line is trimmed when inline on last line is fragmentedASSIGNED (sajidanwar94) in Core - Layout: Block and Inline. Last updated 2026-08-16. 100
Sajid Anwar @sajidanwar.com · 13/08/2026Also this made me want to replicate the MGSV title (codepen.io/editor/kbhom...) but I found some Firefox issues I'll need to fix ... - ::first-line trips up the "last line?" check in some cases, trimming the wrong line - A modified font size in a ::first-line style isn't respected for trimmingcodepen.iotext-box-trim, ::first-line, negative line-heightA code demo by Sajid Anwar created on CodePen 110
Sajid Anwar @sajidanwar.com · 13/08/2026Appreciate it! Personally I'm glad to have the opportunity to contribute to something as cool as Firefox 🙂 010
Sajid Anwar @sajidanwar.com · 13/08/2026Seems like Blink and Gecko support trimming the negative leading to actually grow the text box, but WebKit doesn't. I'm going to add some WPTs for this and file an issue with the CSSWG about if this should be supported / have an explicit note in the spec. (It seems like a useful behavior.) 110
Reposted by Sajid AnwarKeith Cirkel @keithamus.social · 12/08/2026I really love my job. I thought I'd always be a web developer, but developing the web is so much more fun! Adding new features for ~4bn customers is such a satisfying feeling. 1661
Reposted by Sajid AnwarIntentToShip @intenttoship.dev · 06/08/2026Gecko: Intent to Ship: alpha() relative color functiongroups.google.comGecko: Intent to Ship: alpha() relative color functionGecko: Intent to Ship: alpha() relative color function 1103
Reposted by Sajid AnwarIntentToShip @intenttoship.dev · 05/08/2026Gecko: Intent to Prototype: CSS at-rule() function for @supportsgroups.google.comGecko: Intent to Prototype: CSS at-rule() function for @supportsGecko: Intent to Prototype: CSS at-rule() function for @supports 0164
Reposted by Sajid AnwarFirefox Nightly @firefoxnightly.bsky.social · 03/08/2026Firefox now supports the progress() CSS function. This is a math function that can be used in calculations to compute the position of a value relative to a start and an end. bugzilla.mozilla.org/2047345bugzilla.mozilla.org2047345 - Set layout.css.progress-function.enabled for all usersRESOLVED (sajidanwar94) in Core - CSS Parsing and Computation. Last updated 2026-08-01. 1284
Sajid Anwar @sajidanwar.com · 29/07/2026Also me! 😀 There are some serialization changes that the CSSWG is going to discuss soon, so maybe a full release for 155 or 156? 010
Sajid Anwar @sajidanwar.com · 29/07/2026Huge thanks to the developers at @firefox.com for all the assistance and reviews, I'm genuinely having so much fun contributing (special shout out to Emilio, David, Jonathan, and Nicolas!) 050
Sajid Anwar @sajidanwar.com · 29/07/2026... which honestly might have ended up being more work overall due to various calc() prerequisites. I was able to land that and come back to text-box-trim afterwards, and now all of it is releasing in just a few weeks! 130
Sajid Anwar @sajidanwar.com · 29/07/2026Firefox 154 arrives pretty soon and I genuinely can't contain my excitement 😇 text-box-trim was the first "big" feature I wanted to contribute but it felt like it was a bit beyond my reach. So I started on some other layout work, and took a detour to work on sibling-index() and sibling-count() ... 3223
Sajid Anwar @sajidanwar.com · 28/07/2026Ah, that might be on me! I'm pretty new on contributing to Firefox so I missed the process for getting the flag added to the Experimental Features page. Looks like it was mentioned in the 154 nightly release notes (www.firefox.com/en-US/firefo...) and will be on the 155 stable release notes.firefox.comFirefox 110
Sajid Anwar @sajidanwar.com · 28/07/2026Exciting to see coverage of progress() in Firefox! I enabled the feature for Firefox 155, currently scheduled to ship on September 1st, relatively soon! Also a minor correction, both the progress() function and the no-clamp keyword have been enabled for all Firefox Nightly users since June 24th 🙂 110
Reposted by Sajid AnwarFirefox for Web Developers @webdevs.firefox.com · 23/07/2026A little dive into web standards… Why changes were made to popover="hint", and why diversity in browser engines is important: (sorry again for the YT link - video uploads are still broken on bsky) youtube.com/shorts/9LDmd...youtube.compopover="hint" & engine diversityYouTube video by Firefox for Web Developers 17113
Reposted by Sajid AnwarEmelia @thisismissem.social · 21/07/2026Said something interesting to a friend today when they asked about different open social web protocols. It might be a little bit controversial, but: I think that ActivityPub is decentralized in principle, whereas AT Protocol is decentralized in practice. 🧵 211118
Reposted by Sajid AnwarIntentToShip @intenttoship.dev · 21/07/2026Gecko: Intent to Prototype: CSS Typed Arithmeticgroups.google.comGecko: Intent to Prototype: CSS Typed ArithmeticGecko: Intent to Prototype: CSS Typed Arithmetic 0124
Sajid Anwar @sajidanwar.com · 16/07/2026Update: I am in fact trying to land this in Firefox 154 now. 😅 groups.google.com/a/mozilla.or...groups.google.comIntent to Ship: text-box-trim / text-box-edge 010
Reposted by Sajid AnwarIntentToShip @intenttoship.dev · 14/07/2026Gecko: Intent to Ship: text-box-trim / text-box-edgegroups.google.comGecko: Intent to Ship: text-box-trim / text-box-edgeGecko: Intent to Ship: text-box-trim / text-box-edge 1346
Reposted by Sajid AnwarMayor Zohran Kwame Mamdani @mayor.nyc.gov · 14/07/2026This morning in Biddeford, Maine, a 26-year-old man said goodbye to his wife and daughter and left for work. Moments later he was dead, shot in the head by ICE agents, the second man ICE has killed in six days. ICE is killing our neighbors. ICE cannot be reformed. Abolish ICE. 10706503120329
Reposted by Sajid Anwarandré, but scarier @andre-carlisle.bsky.social · 11/07/2026they really told us their tech was so good it registered three strands of hair and days later the ball smashes into a metal cable and nothing happens. alright. ok. 523951
Sajid Anwar @sajidanwar.com · 08/07/2026Correction: I enabled the feature on Nightly builds *only* (for developer testing/crash reporting purposes), but it won't be available in Firefox 154 beta or stable. It's still in development but should become Baseline Newly Available in an upcoming release (I'm optimistic that'll be Firefox 155). 110
Reposted by Sajid AnwarJennie Coughlin @jenniecoughlin.bsky.social · 02/07/2026And here's a visual look at many of the immigrant communities around the country as they cheer on teams from their home or ancestral countries in the World Cup.nytimes.comIn the United States, Every World Cup Team Is a Home Team (Gift Article)At block parties, backyards and beer halls, an expanded tournament gave immigrant diasporas large and small the chance to revel in support of their home countries. 22411
Reposted by Sajid AnwarAdam Serwer @adamserwer.bsky.social · 04/07/2026Cabo Verde was heroic. Never to be forgotten 332610187
