MDN Web Docs

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

Build popovers without JavaScript 🎈

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

> <button popovertarget="info">Help</button>
> <div id="info" popover>Content</div>

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

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

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

🆕 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

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

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

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

🆕 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

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

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

🆕 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

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

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

Keep the screen on with the Screen Wake Lock API 🔒

Prevent devices from sleeping during active tasks, like video playback, presentations, or navigation.

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

Need the last matching item in an array? 🔍

`findLast()` and `findLastIndex()` search from the end, no more reversing arrays just to find the last match.

const lastActive = users.findLast(u => u.active);

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast

Mix colors directly in CSS with color-mix() 🎨

Blend two colors in any color space, no JavaScript or preprocessors needed.

color-mix(in oklch, red 30%, blue)
Supports sRGB, HSL, HWB, LCH, OKLCH, and more.

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

🆕 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

Lazy loading? Infinite scroll? Scroll animations?
Meet IntersectionObserver 👋

React when elements enter or leave the viewport, no scroll event listeners.

⋅ Built-in debouncing
⋅ Works off the main thread
⋅ No performance overhead

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

CSS Cascade Layers give you real control over specificity ⚡

Use @layer to define the order your styles are applied, no more specificity wars.

⋅ Base → components → utilities, in that order
⋅ Third-party styles? Layer them too

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

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

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

CSS :has() is the parent selector we’ve always wanted 🎯

Target elements based on what they contain, not just their own state.
⋅ Style a form when it has an error input
⋅ Add spacing to any element with children
⋅ Combine with :not()

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

Stop writing reduce() just to group an array ✋

`Object.groupBy()` works on all major browsers, helping you group array elements by any key in one line.

Clean, readable, no dependencies.

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

CSS Container Queries change everything for component-based design 📦

Style elements based on their parent's size, not just the viewport.

⋅ Use @container@mastodon.social to scope styles
⋅ Works with inline-size, block-size, and style queries

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

🍪 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

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

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! 🧁
https://developer.mozilla.org/en-US/blog/mdn-turns-20/