MDN Web Docs

Celebrating 20 years of MDN | MDN Blog MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

ICYMI: MDN is now 20 years old! 🥳

🙏 A huge thank you to...
The devs who trust MDN
The contributors who improve it
The readers who challenge us to keep it better
...and the teams across the web who share the mission.

Here's the celebration highlights 🧁
developer.mozilla.org/en-US/blog/...

Pixel data from encoders to decoders | MDN Blog From individual pixels to fully decoded images on your screen, raw pixel data gets transformed, compressed, and efficiently delivered. Learn about the techniques and optimizations that shrink image information without any perceivable loss in quality.

📷 Ever wonder what’s really happening behind your web images?

From pixels to formats to compression, you should use:
- JPEG for details
- PNG for transparency
- WebP & AVIF for web-performance
- SVG for resolution-independent graphics

Read more 👇
developer.mozilla.org/en-US/blog/...

A colorful infographic titled “MDN HTTP Code Cheatsheet with Emojis.” It categorizes HTTP status codes using emoji-enhanced lists grouped by status code classes.

Ever wish HTTP status codes were easier to remember? 🖼️

Check out this MDN cheatsheet that pairs each status code with an emoji to help you visualize what each one means, from 200 OK ✅ to 418 I’m a teapot 🫖

Check it out 👇

Help shape the future of the web! 🗳️

The State of HTML survey is open, and it’s your chance to share what features you use, want, or find confusing. Whether you're new or a seasoned frontender, your input is vital. 🔍

Available in multiple languages 🌐
stateofhtml.com/en-US

Support MDN, support the web 🧡

The MDN swag is live! Now you can rep your favorite dev resource with t-shirts, hoodies, mugs, and more, shipped straight to your door 🏠

🇺🇸 US → mozilla-na.myspreadshop.com/
🇪🇺 EU/UK → mozilla-europe.myspreadshop.ie/

(And yes, ships internationally too!)

The Customizable select page on MDN with my addition: a warning that says Warning: The CSS and HTML features demonstrated in this article currently have limited browser support; check the browser compatibility tables on the individual feature reference pages for more details. Some JavaScript frameworks block these features; in others, they cause hydration failures when Server-Side Rendering (SSR) is enabled.

The changes I made to @developer.mozilla.org are now love 😍

Well done! ❤️👏

Contribute to MDN The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

MDN is more than just a resource. It's a community of developers, contributors, and learners passionate about web development.

Contribute to,
📚 MDN documentation
🤝 Help other devs
💟 Localize content
📝 Review or write on MDN

Start now 👇
developer.mozilla.org/en-US/commu...

Beginning our React ToDo app - Learn web development | MDN Let's say that we've been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through the basic structure and styling of such an application, ready for individual component definition and interactivity, which we'll add later.

Want to start learning React? ⚛️

Build a classic To-Do List app with this hands-on guide from MDN. You'll make a simple but powerful React app where users can:
📝 Add tasks
✏️ Edit tasks
✅ Mark tasks complete
🗑️ Delete tasks

Start here 👇
developer.mozilla.org/en-US/docs/...

Firefox 141 for developers - Mozilla | MDN This article provides information about the changes in Firefox 141 that affect developers. Firefox 141 was released on July 22, 2025.

Our team just crafted release notes for Firefox 141 for Developers 🦊

New edition brings,
- Control on how emojis are rendered
- The variants accessor property now supported on Intl.Locale instances.
- Some i18n changes for add-on developers
...and more!
developer.mozilla.org/en-US/docs/...

MDN Curriculum | MDN Curriculum The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

📚 The MDN Curriculum is your guide to mastering front-end development!

Covering all the fundamentals, it links to the best resources, including those from our learning partner, Scrimba. 🤝

Explore now 👇
https://developer.mozilla.org/en-US/curriculum/?scrimba

Celebrating 20 years of MDN | MDN Blog MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

Celebrating 20 years of MDN
@developer.mozilla.org
developer.mozilla.org/en-US/blog/m...

#ECMAScript #JavaScript

Copy Link to Highlight in Nightly – These Weeks in Firefox: Issue 185 – Firefox Nightly News Highlights The Text Fragments creation UI was just activated in Firefox Nightly allowing you to share/reference a link anchor to any text snippet in a page https://mastodon.social/@firefoxnightly/...

[Nightly Blog] Copy Link to Highlight in Nightly – These Weeks in Firefox: Issue 185
blog.nightly.mozilla.org/2025/07/28/c...

<small>: The Side Comment element - HTML | MDN The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.

<small> - It’s not just about font size! 🔠

It is meant to represent side comments, legal disclaimers, fine print, or less prominent text, not just make things smaller visually.

📜 Used for:
Legal disclaimers
Copyright notes
A11y hints, etc

Read more 👇
developer.mozilla.org/en-US/docs/...

CookieChangeEvent: CookieChangeEvent() constructor - Web APIs | MDN The CookieChangeEvent() constructor creates a new CookieChangeEvent object which is the event type of the change event fired at a CookieStore when any cookie changes occur. This constructor is called by the browser when a change event occurs.

✅ Newly Available: CookieChangeEvent

It lets you respond to cookie changes as they happen, using modern event-driven logic in your app or service worker. The event is fired when cookies are added, changed, or deleted.

Try now 👇
developer.mozilla.org/en-US/docs/...

The Text fragments creation UI was just activated in Firefox Nightly allowing you to share/reference a link anchor to any text snippet in a page bugzilla.mozilla.org/1970641

Thank you so much! ❤️

Command line crash course - Learn web development | MDN In your development process, you'll undoubtedly be required to run some commands in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.

Don’t fear the terminal, embrace it! 🫂

Get comfortable with the command line and learn,
✅ How to open your terminal
✅ Common commands like cd, ls, and mkdir
✅ How to create, move, and delete files and folders

Get the cheat sheet! 👇
developer.mozilla.org/en-US/docs/...

MDN turned 20, and to celebrate, the Chrome team sent us a cake! 🎂

🧁 More than dessert, it’s about open standards.

We still remember the cakes from Microsoft during Firefox 2, 3, and 4… and the one we sent them for IE10!

Here's ours 👇

Thank you so much! ❤️

Celebrating 20 years of MDN | MDN Blog MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

MDN is 20 years old! 🥳

🙏 A huge thank you to...
The devs who read and trust MDN
The contributors who improve it
Everyone working on the web platform who shares our mission.

Here's how we celebrated with the web.dev team! 🧁
developer.mozilla.org/en-US/blog/...

We have that, yes. 😄

How has MDN helped you? Share your stories.

aspect-ratio - CSS | MDN The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

No more padding hacks 🖼️

The aspect-ratio property lets you define a fixed width-to-height ratio for any element, making responsive design easier than ever.

🎥 Great for responsive media
🎴 Cleaner layouts w/o JS
📦 Works with grid, flexbox

Read more ↓
developer.mozilla.org/en-US/docs/...

We've got a few sub-issues before that lands :)
bugzilla.mozilla.org/show_bug.cgi...

CookieStore - Web APIs | MDN The CookieStore interface of the Cookie Store API provides methods for getting and setting cookies asynchronously from either a page or a service worker.

Newly Available starting Firefox 140 ✅

🍪 CookieStore API offers a modern, promise-based way to read, write, update, and delete cookies, all without parsing strings manually. It brings,
✅ Async operations
✅ Structured data
✅ Service worker support

👇
developer.mozilla.org/en-US/docs/...

tabGroups - Mozilla | MDN This API enables extensions to modify and rearrange tab groups.

Building extensions with @mozamo?
Try tabGroups API 📑

The tabGroups API lets you interact with tab groups, giving users better control over their open tabs through your extension.

What's possible?
- Tab managers
- Declutter browsers
- Smarter workflows
developer.mozilla.org/en-US/docs/...

Yes, you can do that... and that change takes effect in the context of a loaded page or service worker that has registered a cookieStore listener.

😂😂

HTMLDialogElement: requestClose() method - Web APIs | MDN The requestClose() method of the HTMLDialogElement interface requests to close the <dialog>. An optional string may be passed as an argument, updating the returnValue of the dialog.

Working with <dialog> elements? 🤔

Don't use .close(), it ends the dialog immediately.

Use HTMLDialogElement.requestClose(), it fires a close event first, giving your app a chance to intercept it, useful for confirmation or animations.

Try now 👇
developer.mozilla.org/en-US/docs/...