MDN Web Docs

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

🆕 Introducing the MDN MCP server!

Bring MDN's docs and browser compatibility data straight into your AI agent or IDE for accurate, up-to-date answers about the web platform.

• Works with VS Code, Zed, Cursor, Claude Code, Codex CLI, Claude Desktop, and more
• No more outdated guesses from training data
• Reliable Baseline and browser support info

Currently experimental. We'd love your feedback.

Learn more 👇
https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/

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/mdn-front-end-deep-dive/

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 👇
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data

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 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted

🆕 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 👇
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

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 👇

The 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

🆕 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

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 👇
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data

Did you know about CSS image-set() ? 🤔

Let the browser pick the best image from a set based on resolution. Perfect for serving retina-ready backgrounds without JavaScript.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set

Under the hood of MDN's new frontend 🛠️

We rebuilt MDN from the ground up.
⋅ Web components for islands of interactivity
⋅ Only the CSS & JS each page needs gets shipped
⋅ Dev server starts in 2 seconds (down from 2 minutes)

Read the full story 👇
https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

🧩 Write cleaner CSS with nesting

You can now nest selectors directly in CSS.
It improves readability, keeps styles modular, and reduces repetition.

No preprocessor needed.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

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 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

CSS :has() — the parent selector is real 🎯

Select elements based on what they contain. Style a card differently when it has an image, or a form when it has invalid inputs.

> .card:has(img) { grid-template-rows: auto 1fr; }

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/:has

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 👇
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Mix colors directly in CSS 🎨

color-mix() blends two colors in any color space. Create tints, shades, and dynamic palettes without a preprocessor.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

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 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Compress and decompress data in the browser natively 📦

The Compression Streams API brings gzip and deflate to the web, no libraries needed.

⋅ Works with ReadableStream and WritableStream
⋅ Compresses arbitrary data client-side

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API

Send messages between browser tabs instantly 📡

BroadcastChannel lets same-origin tabs, iframes, and workers communicate in real time. Great for syncing state across open pages.

> const bc = new BroadcastChannel('app');
> bc.postMessage({ type: 'logout' });

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

Read and write to the clipboard with the modern Clipboard API 📋

async/await, permission-aware, and way cleaner than execCommand.

⋅ Supports text, HTML, and images
⋅ Works in secure contexts (HTTPS)
⋅ No Flash. No hacks.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

Coordinate async tasks with the Web Locks API 🔐

Prevent race conditions across tabs and workers. Request a named lock, and the browser ensures exclusive or shared access.

> await navigator.locks.request('db', async lock => {
> // exclusive access here
> });

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API

Generate cryptographically secure UUIDs in the browser 🔐

`crypto.randomUUID()` is built into the Web Crypto API, no npm package needed.

Works in all modern browsers and Node.js 14.17+.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

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 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

Cancel fetch requests and more with AbortController 🛑

Create a signal, pass it to fetch(), and call abort() when needed. Works with addEventListener, streams, and more.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

Write layout-direction-agnostic CSS with logical properties 🔄

Use margin-inline, padding-block, and border-inline instead of top/right/bottom/left — your layout works in any writing direction.

⋅ RTL support for free
⋅ Cleaner vertical layout code
⋅ Baseline 2023 ✅

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values

Server-render Shadow DOM with declarative syntax ✨

Use to create shadow roots in HTML. No JavaScript required for initial render.

Perfect for SSR and web components.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template

Eliminate awkward text wrapping with one CSS property 📝

text-wrap: balance distributes text evenly across lines — no more single-word orphans in headings.

⋅ Perfect for headlines and cards
⋅ Zero JavaScript needed
⋅ Widely supported ✅

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

🦊 Firefox 150: is now supported.

Lazy-loaded images use their calculated layout size to select from srcset — no more duplicating media queries in HTML.

Read Now 👇
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

🆕 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 👇
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint

🦊 New in Firefox 150: the revert-rule CSS keyword.

Make a property behave as if the current rule didn't exist, letting a value from another matching rule take effect instead.

Read Now 👇
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Build popovers without JavaScript 🎈

The Popover API lets you create tooltips, menus, and dialogs that manage their own visibility and light-dismiss — all declaratively.

> ｿ Help
>

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Support dark mode with one CSS property 🌙

color-scheme tells the browser your page supports light, dark, or both. Form controls, scrollbars, and system colors adapt automatically.

> :root { color-scheme: light dark; }

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

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 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator

Read and write local files directly from the browser 📂

The File System Access API lets users open, edit, and save files on their device — no server required.

⋅ showOpenFilePicker() to open files
⋅ showSaveFilePicker() to save
⋅ Perfect for code editors, image tools, and local apps

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/File_System_API

🆕 CSS Anchor Positioning is Newly Available!

Position tooltips, dropdowns, and floating elements relative to any anchor — without JavaScript.

⋅ anchor-name on the reference element
⋅ position-anchor on the floating element
⋅ No more complex getBoundingClientRect() logic

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning

🦊 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 👇
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

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 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Cancel fetch requests and async operations cleanly ✋

`AbortController` gives you a signal to pass to fetch(), event listeners, and other async APIs.

⋅ Use AbortSignal.timeout() for timeouts
⋅ Composable with AbortSignal.any()

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

Control how web fonts load with font-display 🔤

Avoid invisible text (FOIT) or flashes of unstyled text (FOUT) by telling the browser exactly how to handle font loading.

⋅ swap — show fallback immediately
⋅ optional — skip if slow
⋅ fallback — brief block, then swap

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

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/

Help us build the WebAssembly language reference on MDN! 🤝

We're documenting Wasm 1.0 instructions, reference-types, and SIMD, and looking for technical writers and reviewers to join.

Join the webassembly channel on our Discord or start here 👇
https://github.com/mdn/mdn/issues/821

🦊 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 👇
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

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 👇
https://developer.mozilla.org/en-US/docs/Web/API/TransformStream

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 👇
https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask

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! 👇
https://www.meetup.com/berlin-mozilla-meetup/events/314422227/

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 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries