Posts
Media
Videos
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/...
🆕 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 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/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
🆕 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/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
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...
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 👇 developer.mozilla.org/en-US/docs/...
Server-render Shadow DOM with declarative syntax ✨ Use <template shadowrootmode="open"> to create shadow roots in HTML. No JavaScript required for initial render. Perfect for SSR and web components. Learn more 👇 developer.mozilla.org/en-US/docs/...
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...
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/...
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 👇 github.com/mdn/mdn/iss...
🦊 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/...
Set operations are native in JavaScript 🔢 union(), intersection(), difference(), symmetricDifference() — no more manual loops for set math. > const a = new Set([1, 2, 3]); > a.intersection(new Set([2, 3, 4])); // Set {2, 3} Learn more 👇 developer.mozilla.org/en-US/docs/...
Simplify complex selectors with :is() and :where() ✨ Both group selectors to reduce repetition. The difference? :is() keeps specificity, :where() has zero specificity. > :is(h1, h2, h3) { color: navy; } > :where(h1, h2, h3) { margin: 0; } Learn more 👇 developer.mozilla.org/en-US/docs/...
Want to help make Wasm more accessible? Come join us! ✨
‪Ryan Hunt‬
 ‪@eqrion.bsky.social‬
· 15d
We’re building a user-friendly WebAssembly language reference on MDN! Want to help make Wasm more accessible? We’re looking for technical writers and reviewers to join the project. Start here if you're interested: github.com/mdn/mdn/issu...
Responsive values without media queries 📏 clamp() sets a minimum, preferred, and maximum value in one function. Perfect for fluid typography and responsive sizing. > font-size: clamp(1rem, 2.5vw, 2rem); Learn more 👇 developer.mozilla.org/en-US/docs/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
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 :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 👇 developer.mozilla.org/en-US/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 👇 developer.mozilla.org/en-US/docs/...
Smooth page transitions in the browser ✨ The View Transitions API lets you animate between DOM states with a single API call. Works for SPAs today. > document.startViewTransition(() => updateDOM()); Learn more 👇 developer.mozilla.org/en-US/docs/...
CSS Nesting is here — write less, organize more 🎨 Nest selectors directly inside parent rules, just like Sass. No preprocessor required. > .card { > color: black; > & .title { font-weight: bold; } > } Learn more 👇 developer.mozilla.org/en-US/docs/...
Need a deep copy of an object? 🧬 structuredClone() creates a true deep clone — handles nested objects, Maps, Sets, Dates, and ArrayBuffers. No more JSON.parse(JSON.stringify()) hacks. Learn more 👇 developer.mozilla.org/en-US/docs/...
🆕 CSS Container Queries let components style themselves! Unlike media queries that check the viewport, @container checks the size of a parent element. True component-level responsive design. Learn more 👇 developer.mozilla.org/en-US/docs/...
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/...
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
🆕 The update media feature is Widely Available! Detect how quickly the output device can refresh its display. Target high-refresh screens vs e-ink or print. ⋅ fast — normal screens ⋅ slow — e-ink displays ⋅ none — print media Learn more 👇 developer.mozilla.org/en-US/docs/...
🆕 overflow-block and overflow-inline media features are Widely Available! Query how a device handles content overflow — does it scroll, page, or clip? Target styles based on the user's actual viewing experience. Learn more 👇 developer.mozilla.org/en-US/docs/...
✨ :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/docs/...
🔒 navigator.credentials.preventSilentAccess() is Widely Available! After a user logs out, call this to prevent automatic re-sign-in on the next visit. Essential for shared devices and multi-account flows. Learn more 👇 developer.mozilla.org/en-US/docs/...
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
📦 navigator.storage.estimate() is Widely Available! Find out how much storage your site is using and how much is available. Great for apps that cache large amounts of data. > const { usage, quota } = await navigator.storage.estimate(); Learn more 👇 developer.mozilla.org/en-US/docs/...
hyphenate-character is Widely Available since 2023 🎨 Control the character shown at the end of a line when a word is hyphenated. Default is auto (‐), but you can customize it. Useful for creative typography and multi-language sites. Learn more 👇 developer.mozilla.org/en-US/docs/...
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/...
Have you ever tried contain-intrinsic-size? ⚡ When using size containment, the browser needs a size hint for layout. contain-intrinsic-size provides one, preventing layout jumps. Learn more 👇 developer.mozilla.org/en-US/docs/...
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 👇 developer.mozilla.org/en-US/docs/...
CSS Hyphenation has been Widely Available since '23 🎨 The hyphens property controls automatic word breaking at line ends. Set it to auto and let the browser handle clean text wrapping. Great for narrow columns and responsive typography. Learn more 👇 developer.mozilla.org/en-US/docs/...
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 👇 developer.mozilla.org/en-US/blog/...
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/...
🧩 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 👇 developer.mozilla.org/en-US/docs/...
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/...
🆕 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/...
Creating a resolvable Promise just got cleaner 🧹 `Promise.withResolvers()` returns { promise, resolve, reject } No more wrapping logic inside the constructor. Learn more 👇 developer.mozilla.org/en-US/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 👇 developer.mozilla.org/en-US/docs/...
CSS subgrid solves the hardest grid alignment problems 🏗️ Child elements can participate in the parent grid — aligning across components without hacks. grid-template-columns: subgrid; grid-template-rows: subgrid; Baseline 2023 ✅ Learn more 👇 developer.mozilla.org/en-US/docs/...
Access array elements from the end with .at() 🎯 arr.at(-1) returns the last element — clean, readable, works on all array-like structures. const last = [1, 2, 3].at(-1); // 3 No more arr[arr.length - 1] everywhere. Learn more 👇 developer.mozilla.org/en-US/docs/...
Style native form controls with just one CSS property 🎨 accent-color sets the tint color for checkboxes, radio buttons, range inputs, and progress bars. accent-color: oklch(60% 0.2 250); No custom checkbox hacks. Just CSS. Learn more 👇 developer.mozilla.org/en-US/docs/...
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 👇 developer.mozilla.org/en-US/docs/...
Hold object references without preventing garbage collection 🗑️ `WeakRef` lets you reference an object while allowing it to be GC’d if nothing else holds a strong reference. Use for caches, and pair with FinalizationRegistry. Learn more 👇 developer.mozilla.org/en-US/docs/...
🆕 Animate elements from display: none CSS `@starting-style` lets you define the initial style for elements entering the page, enabling enter animations without JavaScript. ⋅ Combine with transition ⋅ Works with popover and dialog Learn more 👇 developer.mozilla.org/en-US/docs/...
Measure your own code performance precisely ⏱️ `performance.mark()` and `performance.measure()` let you instrument JavaScript with high-precision timings. Learn more 👇 developer.mozilla.org/en-US/docs/...
Creating a resolvable Promise just got cleaner 🧹 `Promise.withResolvers()` returns { promise, resolve, reject } No more wrapping logic inside the constructor. Learn more 👇 developer.mozilla.org/en-US/docs/...
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/...
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/...
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/...
Stop scroll chaining with overscroll-behavior 🛑 Prevent modals and sidebars from accidentally scrolling the page behind them. ⋅ Works on any scrollable element ⋅ Also controls the bounce effect on mobile Learn more 👇 developer.mozilla.org/en-US/docs/...
Access characters from the end of a string with .at() ✨ str.at(-1) gets the last character, no more str[str.length - 1] gymnastics. Works on strings, arrays, and typed arrays. Learn more 👇 developer.mozilla.org/en-US/docs/...
🆕 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/...
📬 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/...
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/...
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/...
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/...
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/...
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/...
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/...
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/...
🆕 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/...