MDN Web Docs

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/mdn…

🆕 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/Web…

📬 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/Web…

@cyral_ @Michaili_K @tiredortired Thanks for the feedback! 🙌

@Michaili_K @tiredortired @MozDevNet This is what the mdn tweet should have said, because it’s not “zero effort”. The big catch is you need to know the size, which may not be feasible with responsive content or text that is dynamic

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/Web…

Maintain perfect proportions with CSS aspect-ratio 📍 No more padding-top hacks for 16:9 videos or square avatars. aspect-ratio: 16 / 9; ⋅ Works with any box model ⋅ Respects min/max dimensions ⋅ Baseline since 2021 ✅ Learn more 👇 developer.mozilla.org/en-US/docs/Web…

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/Web…

@duncanmcalester We've been around for a while 😄

@MozDevNet Flash? Now, that's a name I've not heard in a long time. A long time.

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 👇 developer.mozilla.org/en-US/docs/Web…

Format numbers correctly for any locale, no npm package needed 🌍 `Intl.NumberFormat` handles currencies, percentages, units, and compact notation. Learn more 👇 developer.mozilla.org/en-US/docs/Web…

Control animations with JavaScript 🎬 The Web Animations API gives you programmatic control over CSS animations. ⋅ Play, pause, reverse, and seek ⋅ Read animated values in real time ⋅ Combines well with scroll-driven animations Learn more 👇 developer.mozilla.org/en-US/docs/Web…

🆕 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 Learn more 👇 developer.mozilla.org/en-US/docs/Web…

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 👇 developer.mozilla.org/en-US/docs/Web…

@justfly1984 @kentcdodds @bunjavascript yes, it is 🥟

@MozDevNet @kentcdodds Is it supported in @bunjavascript ?

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/Web…

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 👇 developer.mozilla.org/en-US/docs/Web…

🆕 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/Web…

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 👇 developer.mozilla.org/en-US/docs/Web…

@ShOgandzhanian Anyone can do anything 😄

@MozDevNet Who on earth was reversing array just to find the last match?

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 👇 developer.mozilla.org/en-US/docs/Web…

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 👇 developer.mozilla.org/en-US/docs/Web…