MDN Web Docs

The official MDN Web Docs account. We deliver the best web docs around.

Visit → https://mdn.dev
Contribute → https://mdn.dev/community

Home: https://developer.mozilla.org
GitHub: https://github.com/mdn
Blog: https://mdn.dev/blog
Discord: https://mdn.dev/discord

Last Notes

2026-04-25 10:00:15 UTC

Mozilla Meetup is back in Berlin! 🥳
🗓️ Apr 28 // 18:00
Firefox, open source & the future of the web.
🎤 Firefox Mobile open source contributions
🗺️ Firefox Roadmap & upcoming features
🤝 Networking + raffle
RSVP now! 👇
https://www.meetup.com/berlin-mozilla-meetup/events/314422227/
https://files.mastodon.social/media_attachments/files/116/464/760/544/704/318/original/9715deeed3f4c6ec.png

2026-04-16 21:00:11 UTC

The <dialog> element handles modals the right way 🪟
Built-in focus trapping, backdrop styling, and Escape key handling. No more custom modal libraries.
⋅ .showModal() for modal dialogs
⋅ .show() for non-modal
⋅ ::backdrop for overlay styling
Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog

2026-04-13 21:00:15 UTC

Need to detect when elements enter the viewport? 👀
IntersectionObserver fires a callback when elements cross a visibility threshold. No more scroll event listeners.
⋅ Lazy-load images
⋅ Track ad visibility
⋅ Trigger scroll animations
Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
https://files.mastodon.social/media_attachments/files/116/399/408/066/988/347/original/edcbc7f3966e8fc3.png

2026-04-10 15:00:22 UTC

From 2-min dev server starts to 2s ⚡
We rewrote MDN's entire frontend, ditching the React SPA for Lit web components, server components, and Rspack. The result: less JS shipped, scoped CSS, and a build pipeline that just works.
Read how we did it 👇
https://developer.mozilla.org/en-US/blog/under-the-hood-of-mdns-new-frontend
https://files.mastodon.social/media_attachments/files/116/381/005/942/394/558/original/0945a27cfafa1f43.png

2026-03-29 07:00:07 UTC

CSS nesting is now Baseline 🎉
Write nested selectors directly in CSS — just like Sass, but natively.
.card {
color: black;
&:hover { color: blue; }
.title { font-weight: bold; }
}
No preprocessor needed.
Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

2026-03-08 21:00:09 UTC

Creating a resolvable Promise just got cleaner 🧹
`Promise.withResolvers()` returns { promise, resolve, reject }
No more wrapping logic inside the constructor.
Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers
https://files.mastodon.social/media_attachments/files/116/195/564/481/907/958/original/28e699184fb87213.png

2026-02-18 09:00:06 UTC

Meet the CSS Custom Highlight API ✨
Style arbitrary text ranges without modifying the DOM.
📝 Great for search results
💻 Syntax highlighting
📚 Text annotations
Learn how it works 👇
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

2026-02-17 16:00:11 UTC

We're exploring ways to make it easier to share specific links to sections on MDN. Which interaction feels most natural to you?
Vote A, or B. 🗳️
https://files.mastodon.social/media_attachments/files/116/086/801/010/703/504/original/a2c5e8a66ebf038d.png

2026-01-26 11:00:22 UTC

🆕 The URL Pattern API is Newly Available!
Use it to match and extract parts of URLs, no need to reinvent routing logic. Supports literals, wildcards, named groups, and even regex constraints.
Learn how it works 👇
https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API
https://files.mastodon.social/media_attachments/files/115/961/051/347/789/294/original/689ac3ad7e11bf9e.png

2025-12-31 13:00:09 UTC

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 👇
https://developer.mozilla.org/en-US/community

2025-11-26 13:00:10 UTC

Fine-tune multilingual typography with text-autospace ✨
It lets you control spacing between CJK and Latin characters.
> text-autospace: ideograph-alpha ideograph-numeric punctuation;
Now available on Baseline 2025. 🎉
Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace
https://files.mastodon.social/media_attachments/files/115/616/121/444/592/497/original/8c07bf1e3d04f947.png

2025-10-23 11:00:06 UTC

✨ One line of CSS. Smooth page transitions. No JavaScript.
```
@view-transition {
navigation: auto;
}
```
The 🆕 CSS View Transitions bring native animations to multi-page apps, no SPA setup needed!
Explore now 👇
https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/

2025-09-03 12:00:07 UTC

Relative color syntax is a game changer! 🎨
Lighten, darken, shift hue, tweak alpha, all without manually converting color formats.
✅ Works with custom properties
✅ Keeps your design system DRY
✅ Supported in modern browsers
Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

2025-08-25 10:00:02 UTC

We’ve launched MDN’s new front end — and it’s just the beginning.
Intentionally targeting Baseline "Widely available" features when deciding on which ones to use. This means we're able to adopt modern CSS and web components for our UI.
Check it out 👇
https://developer.mozilla.org/en-US/blog/launching-new-front-end/

2025-08-07 11:00:07 UTC

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 → https://mozilla-na.myspreadshop.com/
🇪🇺 EU/UK → https://mozilla-europe.myspreadshop.ie/
(And yes, ships internationally too!)
https://files.mastodon.social/media_attachments/files/114/987/132/943/885/945/original/fb85baba71b39f6e.png

2025-07-28 20:00:02 UTC

<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 👇
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/small

2025-03-18 16:00:28 UTC

CSS is CSSing
https://files.mastodon.social/media_attachments/files/114/184/265/918/898/658/original/394029759c37b787.png

2025-02-21 07:00:03 UTC

JavaScript’s Map is a powerful data structure designed for key-value pairs, offering better performance and flexibility than plain objects in many cases.
Key Advantages:
✅ Preserves Key Order
✅ Flexible Key Types
✅ Better Performance
Give it a try! ↓
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map