MDN Web Docs
@developer
The official MDN Web Docs account, now on Bluesky. We deliver the best web docs around. Visit Contribute
🆕 Introducing the MDN MCP server! Bring MDN's docs and browser compat data straight into your AI agent or IDE for accurate, up-to-date answers about the web platform. No more outdated guesses from training data. Learn more 👇 developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/
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 👇
🦊 Firefox 150: web extensions can now use the Web Authentication API. Extensions can create and retrieve WebAuthn credentials for any domain covered by their host permissions. Read Now 👇 developer.mozilla.org/en-US/docs/...
Have you heard of CSS Subgrid? 🤔 A grid item can now pass its parent's grid lines to children, so nested elements align perfectly with the outer layout. No more hacky workarounds for aligned nested grids. Learn more 👇 developer.mozilla.org/en-US/docs/...
🆕 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 👇 developer.mozilla.org/en-US/docs/...
Wait for all promises, even the failing ones 🔄 `Promise.allSettled()` waits for every promise to finish, success or failure. ⋅ Returns { status: 'fulfilled', value } or { status: 'rejected', reason } ⋅ Perfect for batch operations Learn more 👇 developer.mozilla.org/en-US/docs/...
📬 Check own properties safely with Object.hasOwn() A safer alternative to hasOwnProperty, works even on objects with a null prototype. Baseline since 2022 ✅ Learn more 👇 developer.mozilla.org/en-US/docs/...
Create frosted glass effects in CSS 🪟 backdrop-filter applies visual effects to the content behind an element - blur, brightness, contrast, and more. backdrop-filter: blur(10px) brightness(0.9); No JavaScript. No canvas tricks. Learn more 👇 developer.mozilla.org/en-US/docs/...
The CSS next-sibling combinator (+) selects an element only when it immediately follows another, same parent, no elements between them. img + p { font-weight: bold; } Learn more 👇 developer.mozilla.org/en-US/docs/...
🆕 Document.caretPositionFromPoint() is Newly Available! Give it an (x, y) coordinate and get back the exact DOM node and character offset. Perfect for click-to-edit interfaces. Check it out 👇 developer.mozilla.org/en-US/docs/...
🆕 The Popover API is Baseline, no JavaScript needed Tooltips, dropdowns, and menus with just HTML attributes. ⋅ popover attribute on any element ⋅ popovertarget to wire the trigger ⋅ Accessible by default, no ARIA hacks Learn more 👇 developer.mozilla.org/en-US/docs/...
Better error chaining is finally in JavaScript 🔗 `Error.cause` lets you attach the original error when rethrowing, keeping full context without losing the stack. Learn more 👇 developer.mozilla.org/en-US/docs/...
Speed up rendering with content-visibility: auto ⚡ This CSS property skips rendering off-screen content until needed, giving massive performance wins on long pages. ⋅ Pairs with contain-intrinsic-size ⋅ Zero-effort lazy rendering Learn more 👇 developer.mozilla.org/en-US/docs/...
React to element size changes, not just the window 📐 `ResizeObserver` fires when any element's dimensions change, perfect for responsive components. ⋅ Observe padding box, content box, or border box ⋅ Works with dynamic DOM changes Learn more 👇 developer.mozilla.org/en-US/docs/...
Run non-critical work without blocking the UI 💤 `requestIdleCallback()` schedules tasks during browser idle time. ⚠️ Limited Availability ⋅ Runs only when the main thread is free ⋅ Great for analytics, prefetching, and cleanup Learn more 👇 developer.mozilla.org/en-US/docs/...
JavaScript's date object has been tricky for years, but that is changing. The NEW Temporal API brings, 🌍 Easily handle time zones 📆 Precise date math 🕒 Parse ISO strings without errors ⌛ Durations, date ranges, and more. Start experimenting 👇 developer.mozilla.org/en-US/docs/...
JavaScript now has non-mutating array methods ✨ `toSorted()`, `toReversed()`, `toSpliced()`, and `with()` return new arrays instead of modifying the original. No more [...arr].sort() to avoid side effects. Learn more 👇 developer.mozilla.org/en-US/docs/...
Show focus rings only when needed 🎯 :focus-visible applies styles when an element receives focus via keyboard, but not on mouse clicks. Better UX for everyone. Read More 👇 developer.mozilla.org/en-US/docs/...
Transform streaming data on the fly 🔄 TransformStream sits between a readable and writable stream, letting you modify chunks as they pass through. Perfect for encoding, compression, or parsing. Learn more 👇 developer.mozilla.org/en-US/docs/...
Did you know about Clear-Site-Data header? 👀 One HTTP header to clear cookies, storage, or cache for your site. Perfect for logout flows. Learn more 👇 developer.mozilla.org/en-US/docs/...
Schedule work at the right time with queueMicrotask() ⚡ Run a callback after the current task but before rendering. More predictable than setTimeout(fn, 0), lighter than a Promise. Learn more 👇 developer.mozilla.org/en-US/docs/...
Format lists like a native speaker 🌐 Intl.ListFormat turns arrays into grammatically correct strings in any locale. Handles "and", "or", and narrow styles automatically. Learn more 👇 developer.mozilla.org/en-US/docs/...
Fit images perfectly with object-fit 🖼️ Control how replaced content (images, videos) fills its container. cover, contain, fill, scale-down, or none. No more stretched or squished images. Learn more 👇 developer.mozilla.org/en-US/docs/...
Parse and build query strings the easy way 🔗 URLSearchParams gives you a clean API for working with URL parameters. Get, set, append, delete, and iterate, no regex needed. Learn more 👇 developer.mozilla.org/en-US/docs/...
Happening tomorrow at Mozilla Berlin! 🚨 Firefox, open source & the future of the web. 🎤 Firefox Mobile open source contributions 🗺️ Firefox Roadmap & upcoming features 🤝 Networking + raffle 🗓️ Apr 28 // 18:00 RSVP now! 👇 www.meetup.com/berlin-mozi...
Transform iterators without converting to arrays 🔄 Iterator helpers like .map(), .filter(), .take(), and .drop() work lazily on any iterable. Process data efficiently without intermediate arrays. Learn more 👇 developer.mozilla.org/en-US/docs/...
🦊 Firefox 150 is here! What's new? 🎨 color-mix() accepts multiple colors 🎥 New :playing, :paused, :muted media pseudo-classes 📜 animation-range-start/end for scroll animations ♿ ariaNotify() for screen reader support and more... Release notes 👇 developer.mozilla.org/en-US/docs/...
Transform key-value pairs back into objects ↩️ Object.fromEntries() is the inverse of Object.entries(). Convert Maps, arrays, or URLSearchParams directly into plain objects. Learn more 👇 developer.mozilla.org/en-US/docs/...
Use gap in flexbox, no more margin hacks 📐 The gap property works in flexbox, grid, and multi-column layouts. Set consistent spacing between items without affecting outer edges. Learn more 👇 developer.mozilla.org/en-US/docs/...
Read and build form data with the FormData API 📋 Construct form submissions programmatically, including file uploads. Works with fetch() for modern form handling. Learn more 👇 developer.mozilla.org/en-US/docs/...