MDN Web Docs@MozDevNet

The official MDN Web Docs account. We deliver the best web docs around.

 Worldwide
developer.mozilla.org
Joined March 2013
498 Photos and videos
Filter
Exclude
Time range
-
Minimum likes
๐Ÿ†• 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/โ€ฆ
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.

ALT 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.

ALT 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.
2
23
2,218
๐Ÿ†• 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/โ€ฆ
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.

ALT 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.

16
189
1,098
57,921
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.

ALT A colorful infographic titled โ€œMDN HTTP Code Cheatsheet with Emojis.โ€ It categorizes HTTP status codes using emoji-enhanced lists grouped by status code classes.

3
11
82
3,071
๐ŸฆŠ 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/โ€ฆ
Firefox 150 release notes feature a minimalist design with soft colors, highlighting new capabilities for web extensions.

ALT Firefox 150 release notes feature a minimalist design with soft colors, highlighting new capabilities for web extensions.
22
2,464
๐ŸฆŠ 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/โ€ฆ
Firefox 150 release notes with a smooth background design featuring soft waves in pastel colors.

ALT Firefox 150 release notes with a smooth background design featuring soft waves in pastel colors.
2
33
3,145
๐ŸฆŠ 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/โ€ฆ
Firefox 150 release notes feature a pastel background with waves, emphasizing updates and new features.

ALT Firefox 150 release notes feature a pastel background with waves, emphasizing updates and new features.
6
43
2,500
๐ŸฆŠ 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/โ€ฆ
Firefox 150 release notes highlighted with a light background and wavy design, inviting users to read more.

ALT Firefox 150 release notes highlighted with a light background and wavy design, inviting users to read more.
5
33
2,285
๐ŸฆŠ 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/โ€ฆ
Firefox 150 release notes feature a pastel background with wavy patterns, highlighting the new color-mix() function for CSS.

ALT Firefox 150 release notes feature a pastel background with wavy patterns, highlighting the new color-mix() function for CSS.
4
44
2,445
๐ŸฆŠ 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/โ€ฆ
Firefox 150 release notes feature a soft pastel background with text highlighting updates and a call to action to read more.

ALT Firefox 150 release notes feature a soft pastel background with text highlighting updates and a call to action to read more.

1
5
49
2,510
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/โ€ฆ
Code snippet showcasing CSS Subgrid implementation with defined grid properties for a main grid, items, and sub-items.

ALT Code snippet showcasing CSS Subgrid implementation with defined grid properties for a main grid, items, and sub-items.

1
14
115
4,003
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/โ€ฆ
Firefox 150 release notes feature a light background with pastel waves. Includes a clear call to action to read more about updates.

ALT Firefox 150 release notes feature a light background with pastel waves. Includes a clear call to action to read more about updates.
9
50
2,499
๐Ÿ†• 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/โ€ฆ
Dark-themed code snippet showing URLPattern examples on MDN: two JavaScript blocks matching "/books" and "/books/:id" with console.log outputs.

ALT Dark-themed code snippet showing URLPattern examples on MDN: two JavaScript blocks matching "/books" and "/books/:id" with console.log outputs.

3
16
147
6,073
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/โ€ฆ
JavaScript code demonstrating `Promise.allSettled()` handling fulfilled and rejected promises, along with results logging output.

ALT JavaScript code demonstrating `Promise.allSettled()` handling fulfilled and rejected promises, along with results logging output.

1
11
128
4,982
โœจ :only-child now matches elements with no parent! The :only-child selector has been updated โ€” it can now match elements that have no parent at all, not just sole children. A subtle but useful spec alignment across all major browsers. Learn more ๐Ÿ‘‡ developer.mozilla.org/en-US/โ€ฆ

:only-child CSS pseudo-class - CSS | MDN

The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

developer.mozilla.org
2
3
41
2,725
โœจ :only-child now matches elements with no parent! The :only-child selector has been updated โ€” it can now match elements that have no parent at all, not just sole children. A subtle but useful spec alignment across all major browsers. Learn more ๐Ÿ‘‡ developer.mozilla.org/en-US/โ€ฆ

:only-child CSS pseudo-class - CSS | MDN

The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

developer.mozilla.org
1
4
74
3,945
Build smooth scroll experiences with CSS scroll snap ๐Ÿ“œ Snap scrollable containers to specific positions โ€” carousels, galleries, and paginated views with zero JavaScript. Learn more ๐Ÿ‘‡ developer.mozilla.org/en-US/โ€ฆ

CSS scroll snap - CSS | MDN

The CSS scroll snap module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing...

developer.mozilla.org
10
77
3,793
๐Ÿ“ฌ 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/โ€ฆ
Code snippet demonstrating the use of Object.hasOwn() in JavaScript to check property existence in various scenarios.

ALT Code snippet demonstrating the use of Object.hasOwn() in JavaScript to check property existence in various scenarios.

1
8
119
4,433
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/โ€ฆ
Code snippet showcasing various CSS `backdrop-filter` functions like blur, brightness, contrast, and saturation against a blue background.

ALT Code snippet showcasing various CSS `backdrop-filter` functions like blur, brightness, contrast, and saturation against a blue background.

1
13
181
8,832
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/โ€ฆ
Code snippet illustrating CSS sibling selection with `li:has(+ li:last-of-type)` and style rules for color and font weight.

ALT Code snippet illustrating CSS sibling selection with `li:has(+ li:last-of-type)` and style rules for color and font weight.
12
116
4,390
๐Ÿ†• 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/โ€ฆ
The graphic displays the syntax for the `caretPositionFromPoint()` function in a code snippet format against a blue background.

ALT The graphic displays the syntax for the `caretPositionFromPoint()` function in a code snippet format against a blue background.
27
216
8,148
Load more