Sign in

MDN Web Docs

@developer.mozilla.org
3.3K followers 5 following 514 posts

The official MDN Web Docs account, now on Bluesky. We deliver the best web docs around. Visit → mdn.dev Contribute → mdn.dev/community

PostsRepliesMedia
MDN Web Docs @developer.mozilla.org · 25/09/2026
🆕 Customize MDN's browser compat tables! Press ⚙️ Settings on any compat table to choose which browsers and engines you see, and hide the ones you don't need. Your picks are saved in your browser. Try it 👇 developer.mozilla.org/en-US/docs/W...
MDN's browser compatibility table for the HTML popover attribute. Its columns cover desktop and mobile browsers, showing which versions support the attribute and its "hint" value. A "Settings" button sits above the table.The Browser compatibility settings dialog on MDN. Browsers appear as chips grouped under Desktop, Mobile, Server and XR, and each one can be added to or removed from the table.
27725
MDN Web Docs @developer.mozilla.org · 15/06/2026
🆕 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/
A headline Introducing MDN MCP server above a terminal window titled Light-dark CSS function for images, showing a prompt asking how to use the light-dark() CSS function for images and which browsers support it, with a note that the mdn tool was called 4 times, followed by an answer explaining that light-dark() takes two image values and works anywhere an image is accepted. The MDN logo appears on the right.
211823
MDN Web Docs @developer.mozilla.org · 18/05/2026
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 👇
A colorful infographic titled “MDN HTTP Code Cheatsheet with Emojis.” It categorizes HTTP status codes using emoji-enhanced lists grouped by status code classes.
2474
MDN Web Docs @developer.mozilla.org · 18/05/2026
🦊 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/...
Firefox 150 release notes feature a minimalist design with soft colors, highlighting new capabilities for web extensions.
0292
MDN Web Docs @developer.mozilla.org · 15/05/2026
🦊 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 👇 developer.mozilla.org/en-US/docs/...
Firefox 150 release notes with a smooth background design featuring soft waves in pastel colors.
0150
MDN Web Docs @developer.mozilla.org · 14/05/2026
🦊 Firefox 150: light-dark() now accepts image values — not just colors. Use it with images and gradients to adapt visuals based on color scheme. background: light-dark(url(light.png), url(dark.png)); Read Now 👇 developer.mozilla.org/en-US/docs/...
Firefox 150 release notes feature a pastel background with waves, emphasizing updates and new features.
0361
MDN Web Docs @developer.mozilla.org · 13/05/2026
🦊 Firefox 150 ships ariaNotify() on Document and Element. Queue text to be announced by a screen reader — a more ergonomic and reliable alternative to ARIA live regions. Read Now 👇 developer.mozilla.org/en-US/docs/...
Firefox 150 release notes highlighted with a light background and wavy design, inviting users to read more.
0321
MDN Web Docs @developer.mozilla.org · 12/05/2026
🦊 Firefox 150: color-mix() now accepts more than two colors at once. Mix any number of colors in a single declaration — no more nesting multiple calls. Read Now 👇 developer.mozilla.org/en-US/docs/...
Firefox 150 release notes feature a pastel background with wavy patterns, highlighting the new color-mix() function for CSS.
0160
MDN Web Docs @developer.mozilla.org · 12/05/2026
🦊 Firefox 150: <img sizes="auto"> is now supported. Lazy-loaded images use their calculated layout size to select from srcset — no more duplicating media queries in HTML. Read Now 👇 developer.mozilla.org/en-US/docs/...
Firefox 150 release notes feature a soft pastel background with text highlighting updates and a call to action to read more.
0261
MDN Web Docs @developer.mozilla.org · 11/05/2026
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/...
Code snippet showcasing CSS Subgrid implementation with defined grid properties for a main grid, items, and sub-items.
0363
MDN Web Docs @developer.mozilla.org · 11/05/2026
🆕 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/...
Dark-themed code snippet showing URLPattern examples on MDN: two JavaScript blocks matching "/books" and "/books/:id" with console.log outputs.
2736
MDN Web Docs @developer.mozilla.org · 11/05/2026
Firefox 150 ships 7 media pseudo-classes: :buffering, :muted, :paused, :playing, :seeking, :stalled, :volume-locked. Style <audio> and <video> elements based on their playback state. Read Now 👇 developer.mozilla.org/en-US/docs/...
Firefox 150 release notes feature a light background with pastel waves. Includes a clear call to action to read more about updates.
0322
MDN Web Docs @developer.mozilla.org · 10/05/2026
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/...
JavaScript code demonstrating `Promise.allSettled()` handling fulfilled and rejected promises, along with results logging output.
0352
MDN Web Docs @developer.mozilla.org · 08/05/2026
📬 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/...
Code snippet demonstrating the use of Object.hasOwn() in JavaScript to check property existence in various scenarios.
2463
MDN Web Docs @developer.mozilla.org · 08/05/2026
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/...
Code snippet showcasing various CSS `backdrop-filter` functions like blur, brightness, contrast, and saturation against a blue background.
213911
MDN Web Docs @developer.mozilla.org · 08/05/2026
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/...
Code snippet illustrating CSS sibling selection with `li:has(+ li:last-of-type)` and style rules for color and font weight.
0251
MDN Web Docs @developer.mozilla.org · 07/05/2026
🆕 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 graphic displays the syntax for the `caretPositionFromPoint()` function in a code snippet format against a blue background.
0251
MDN Web Docs @developer.mozilla.org · 07/05/2026
🆕 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/...
Code snippet demonstrating a simple popover with a toggle button, showcasing HTML attributes for functionality.
01067
MDN Web Docs @developer.mozilla.org · 06/05/2026
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/...
Code snippet demonstrating error handling in JavaScript using `try`, `catch`, and `Error.cause` for maintaining context during rethrowing.
2711
MDN Web Docs @developer.mozilla.org · 06/05/2026
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/...
CSS snippet detailing the `content-visibility` property with keyword and global values for efficient rendering practices.
1632
MDN Web Docs @developer.mozilla.org · 05/05/2026
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/...
Code snippet demonstrates using `ResizeObserver` to adjust element width dynamically based on its content size.
0241
MDN Web Docs @developer.mozilla.org · 05/05/2026
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/...
JavaScript code demonstrating `Promise.allSettled()` handling fulfilled and rejected promises, along with results logging output.
0311
MDN Web Docs @developer.mozilla.org · 05/05/2026
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/...
Syntax for `requestIdleCallback()` shown on a dark background, highlighting its parameters for managing browser idle time efficiently.
0352
MDN Web Docs @developer.mozilla.org · 04/05/2026
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/...
Code snippet demonstrating temporal date precision in JavaScript, highlighting differences in epoch milliseconds output.
0718
MDN Web Docs @developer.mozilla.org · 01/05/2026
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/...
Code snippet demonstrating the `toSorted()` method, showcasing sorting of arrays without mutating the original arrays.
819318
MDN Web Docs @developer.mozilla.org · 01/05/2026
🆕 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/...
Dark-themed code snippet showing URLPattern examples on MDN: two JavaScript blocks matching "/books" and "/books/:id" with console.log outputs.
08811
MDN Web Docs @developer.mozilla.org · 30/04/2026
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/...
CSS code snippet demonstrating styles for input and select elements with the :focus-visible pseudo-class for improved accessibility.
0384
MDN Web Docs @developer.mozilla.org · 30/04/2026
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/...
Code snippet demonstrating chaining of multiple ReadableStreams with TransformStream in a JavaScript context.
0211
MDN Web Docs @developer.mozilla.org · 29/04/2026
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/...
Code snippet demonstrating the syntax for the HTTP Clear-Site-Data header, including single, multiple, and wildcard directives.
011116
MDN Web Docs @developer.mozilla.org · 29/04/2026
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/...
Code snippet demonstrates a JavaScript function using `queueMicrotask()` to manage data loading and caching with event dispatching.
0310
MDN Web Docs @developer.mozilla.org · 28/04/2026
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/...
Code snippet demonstrating the use of Intl.ListFormat to format lists in different styles and types in JavaScript.
1554
MDN Web Docs @developer.mozilla.org · 28/04/2026
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/...
Syntax for the CSS property `object-fit`, showing values like contain, cover, fill, and scale-down on a dark background.
0333
MDN Web Docs @developer.mozilla.org · 27/04/2026
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/...
Code snippet demonstrating usage of URLSearchParams for manipulating URL parameters, including getting, setting, and appending values.
0253
MDN Web Docs @developer.mozilla.org · 27/04/2026
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...
Event announcement for Tech Talks at Mozilla in Berlin on April 28, 2026, featuring talks, networking, and a raffle.
0101
MDN Web Docs @developer.mozilla.org · 25/04/2026
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! 👇 www.meetup.com/berlin-mozi...
Event announcement for Tech Talks at Mozilla in Berlin on April 28, 2026, featuring talks, networking, and a raffle.
141
MDN Web Docs @developer.mozilla.org · 24/04/2026
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/...
Code snippet illustrating the creation of a custom iterator class in JavaScript, showing methods for object iteration.
0370
MDN Web Docs @developer.mozilla.org · 24/04/2026
🦊 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/...
Firefox 150 release notes highlighted with a soft background, featuring announcement text and a call to action to read more.
2240
MDN Web Docs @developer.mozilla.org · 22/04/2026
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/...
JavaScript code demonstrates using `Object.fromEntries()` to convert a Map into a plain object with key-value pairs.
0400
MDN Web Docs @developer.mozilla.org · 22/04/2026
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/...
CSS code snippet shows various uses of the gap property in flexbox and grid layouts for consistent spacing between items.
0211
MDN Web Docs @developer.mozilla.org · 21/04/2026
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/...
Code snippets show the syntax for using the FormData constructor in JavaScript, including different parameter options.
0261
MDN Web Docs @developer.mozilla.org · 21/04/2026
Control CSS specificity with @layer 🎯 Cascade layers let you define explicit priority between groups of styles. No more !important battles. Learn more 👇 developer.mozilla.org/en-US/docs/...
0284
MDN Web Docs @developer.mozilla.org · 20/04/2026
Split text by words and sentences, for any language 🌍 Intl.Segmenter handles locale-aware text segmentation, including CJK languages where spaces don't separate words. Learn more 👇 developer.mozilla.org/en-US/docs/...
JavaScript code showcasing the Intl.Segmenter for French text segmentation, demonstrating word granularity with expected output.
2323
MDN Web Docs @developer.mozilla.org · 20/04/2026
Write direction-aware CSS with logical properties 🧭 Replace top/right/bottom/left with block-start/inline-end/block-end/inline-start. Your layouts adapt automatically to RTL and vertical writing modes. Learn more 👇 developer.mozilla.org/en-US/docs/...
A dark-themed code editor displays CSS logical properties, including terms like block-size, border-block, and inset.
0211
MDN Web Docs @developer.mozilla.org · 19/04/2026
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 👇 developer.mozilla.org/en-US/docs/...
A dark interface with the syntax for creating a new AbortController, showcasing the command and context for web development.
0320
MDN Web Docs @developer.mozilla.org · 19/04/2026
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/...
Code snippet demonstrating the use of `self.crypto.randomUUID()` for generating a UUID in JavaScript, with a sample output shown.
6894
MDN Web Docs @developer.mozilla.org · 18/04/2026
Search arrays from the end with findLast() 🔍 Array.findLast() and findLastIndex() return the last matching element without reversing the array first. Learn more 👇 developer.mozilla.org/en-US/docs/...
JavaScript code snippet demonstrates using findLast() to locate the last element greater than 45 in an array. Expected output is 130.
0224
MDN Web Docs @developer.mozilla.org · 18/04/2026
Balance your headings automatically ⚖️ text-wrap: balance distributes text evenly across lines, preventing awkward orphan words. Perfect for headlines and short blocks. Learn more 👇 developer.mozilla.org/en-US/docs/...
Code snippet displaying CSS `text-wrap` properties, including various keyword and global value options for managing text wrapping styles.
1342
MDN Web Docs @developer.mozilla.org · 17/04/2026
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 👇 developer.mozilla.org/en-US/docs/...
CSS code examples for the color-mix() function demonstrate various blending methods and color spaces for creating color palettes.
0301
MDN Web Docs @developer.mozilla.org · 13/04/2026
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 👇 developer.mozilla.org/en-US/docs/...
Code snippet showcasing the syntax for initializing the IntersectionObserver with callback and options parameters.
0250
MDN Web Docs @developer.mozilla.org · 13/04/2026
If you're in Tokyo on April 15, come hang with the Mozilla community. 🇯🇵 We're hosting a meetup with talks on Firefox, open Q&A, and time to connect with contributors and staff. 📅 April 15 · 18:00–21:00 JST 📍 Downtown Tokyo Limited Spots, register 👇 lu.ma/8gaacap2
A pink poster announces the Mozilla Tokyo Meetup on April 15, featuring talks and networking. QR code included for RSVP.
071