Banger

Firefox for Web Developers@webdevs.firefox.com · 3mo ago

sizes="auto" landed in Firefox 150, making responsive images simpler and more reliable. Here's when you can use it, and how…

I had no idea that the subject of the RICG’s canonical responsive images examples endured in the specification to this very day:

New on the Squarespace Engineering Blog! Squarespace & Web Standards: How We Helped Bring HTML Video & Audio Lazy-Loading to Today’s Browsers. I'm real proud of the teamwork that went into this. Stay tuned for part 2 next week, which will cover dev best practices for using this new HTML standard.

Squarespace & Web Standards: How We Helped Bring HTML Video & Audio Lazy Loading to Today’s Browsers — Squarespace Engineering Blog

At Squarespace, many of our core products are built on web standards, and our engineers are constantly pushing the boundaries of the web’s capabilities. Occasionally, those boundaries reveal a limitat...

engineering.squarespace.com

It's time for Interop 2026! This is a cross-browser effort where we agree on a set of focus areas to improve compatibility. Here's how things went in 2025, and what we're taking on for 2026: hacks.mozilla.org/2026/02/laun...

Is anybody still using xml/HTML polyglots for anything moder (Syntax that is valid in both html and xml) Wondering whether those are something that needs to be considered for future HTML enhancement or a thing of the past...

We mentioned on Winging It that we might show some of our favorite browser tips. Here's one of many that I find delightful. If you are working with shape-outside, then Firefox has a great path editor. I made a quick video to show how it works.

Interop 2026 is now open for proposals! This is your chance to tell browser-makers which well-defined, well-tested features you wish had better support across browsers. ⬇️ Here's how ⬇️ github.com/web-platform...

Gecko: Intent to Ship: CSS View Transitions L1

Did you know? You can style XML with CSS using <?xml-stylesheet href="style.css"?>

Yay! It's the first Firefox release since I've joined the team, so let's take a look at some of the new developer-facing features in Firefox 142… 🧵

Want to build faster websites? Here's how: - Learn how browsers parse, layout & paint - Treat JS as a tool, not the foundation(!) - Favor static HTML or server side rendering at all times - Use Core Web Vitals alongside other metrics to learn shortfalls, improve and iterate Then keep doing that.

I don't know why this lad is building a subterranean city for cats, but I'm all for it.

Email addresses are very simple, and you will score highly in this quiz. e-mail.wtf

Email is Easy

Everyone knows what an email address is, right?

e-mail.wtf

wait...it's up! gitnation.com/contents/the-new…

Okay gang, those who sling HTML, CSS, JS, which _Firefox_ bugs are blocking you? Which features do you think need improving? What new features would you like to see? What work would you prioritise? Big or small, bonus points for linking to a bug (even more for filing bugs then linking them)!

“You might be familiar with SPAs, and MPAs, or actually RFWS ( Regular Fucking Web Sites)” — @cydstumpel.nl #CSSDay

Hey friends, did you know you can make a modal <dialog> element dismissible by clicking outside (aka light dismiss) by adding `closedby=any` to it. That's it. That's all there is to it. <dialog closedby=any> developer.mozilla.org/en-US/docs/W... Chrome 134+, Firefox 140+, coming soon to Safari.

HTMLDialogElement: closedBy property - Web APIs | MDN

The closedBy property of the HTMLDialogElement interface indicates the types of user actions that can be used to close the associated <dialog> element. It sets or returns the dialog's closedby attribu...

developer.mozilla.org

What is web compat? SmoothGate is a good case study and this article by @mths.be explains it well developer.chrome.com/blog/smooshg...

The src attribute on <img> is no longer required. github.com/whatwg/html/...

Make <img> src attribute optional if srcset is present · Issue #9181 · whatwg/html

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element currently requires: The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by ...

github.com

Lots of folks fell for the "DOM is slow" marketing of certain frameworks, but DOM isn't slow. *Uncontrolled style read-back* is. But what if that wasn't a thing? Looking for feedback on a new proposal to control layout thrashing here: github.com/MicrosoftEdge/MS…

MSEdgeExplainers/EventPhases/explainer.md at main · MicrosoftEdge/MSEdgeExplainers

Home for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers

github.com

If you ever wanted to use `sizes=auto` and were bummed out about Safari/Firefox support, Shopify now got a polyfill for ya! github.com/Shopify/auto...

GitHub - Shopify/autosizes: A sizes=auto polyfill

A sizes=auto polyfill. Contribute to Shopify/autosizes development by creating an account on GitHub.

github.com

I take a deep dive into Interop 2025; why the project is there, how it picks what browser features to focus on each year, how well it's doing and what the big areas for this year are - a mix of cleaning up existing features and making sure new features arrive already interoperable

Interop Unites Browser Makers To Smooth Web Inconsistencies

For the past four years, major browser vendors have collaborated to improve web interoperability by coordinating enhancements to inconsistent browser implementations.

thenewstack.io

Browsers used to have a feature where you could add new context menu items. Is this worth reviving? Yes or No? Would you use it as a developer? What use cases do you have? Would you want this as a user?

Lots of sites have this "hovercard" style pattern on links which shows you a cut-down preview of the page behind the link - often times with additional interactions. I wonder if anyone has any more examples? Especially sites which do this (display a rich tooltip) on non-links.

Friday marked my last day at GitHub. I spent almost 8 years building one of my most favourite websites. It was truly a pleasure working on it, but I could feel my interest waning, not least due to React & the push for AI. Today I start at my new job... with totally renewed excitement!

I wrote an article that was #1 on the orange website for a bit earlier today news.ycombinator.com/item?id=4364...

Blink: Intent to Deprecate and Remove: Deprecate special font size rules for H1 within some elements

Starting March 31, 50% of Firefox beta 138 users will have the change where <h1> always has the same UA style, even in article, aside, nav, section. Also, Lighthouse will fail a check if you have an <h1> without font-size specified. Advice for web developers: developer.mozilla.org/en-US/docs/W...

<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layo...

developer.mozilla.org

Simon Pieters@zcorpan.bsky.social · 2y ago

The backstory here is - h1 was specified to have automatic heading level based on the number of ancestor sections (or aside, article, nav). - The default rendering was specified to (roughly) match, such that <section><h1> would have the same font-size and margin as h2 - cont...

As it's Friday (here at least) can all you webdevs do me a favour and make this simple code change: 1. Search for `aria-labeledby` in your codebases. 2. Change it to `aria-labelledby` (note the double L) 3. Submit a PR. 4. Congratulate yourself for your Friday contribution.

And yet another polyfill appears to have poisoned the standards well. This time for scoped custom element registries. People never learn. 🫠