MDN Web Docs
LightNews LightNews
banner
developer.mozilla.org
MDN Web Docs
@developer.mozilla.org
1.8K followers 10 following 330 posts
The official MDN Web Docs account, now on Bluesky. We deliver the best web docs around.

Visit → https://mdn.dev
Contribute → https://mdn.dev/community
Posts Replies Media Videos
developer.mozilla.org
MDN is more than just a resource. It's a community of developers, contributors, and learners passionate about web development.

Contribute to,
📚 MDN documentation
🤝 Help other devs
💟 Localize content
📝 Review or write on MDN

Start now 👇
developer.mozilla.org/en-US/commu...
Contribute to MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
December 26, 2025 at 4:00 PM
developer.mozilla.org
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.
December 25, 2025 at 12:00 PM
developer.mozilla.org
🆕 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/...
December 25, 2025 at 5:00 AM
developer.mozilla.org
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/...
Temporal - JavaScript | MDN
The Temporal object enables date and time management in various scenarios, including built-in time zone and calendar representation, wall-clock time conversions, arithmetics, formatting, and more. It is designed as a full replacement for the Date object.
developer.mozilla.org
December 24, 2025 at 1:00 PM
developer.mozilla.org
✨ One line of CSS. Smooth page transitions. No JavaScript.

```
@view-transition {
navigation: auto;
}
```

The 🆕 CSS View Transitions bring native animations to multi-page apps, no SPA setup needed!

Explore now 👇
developer.mozilla.org/en-US/blog/...
A beginner-friendly guide to view transitions in CSS | MDN Blog
Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages.
developer.mozilla.org
December 24, 2025 at 7:00 AM
developer.mozilla.org
Did you know? You can now build carousels with CSS! 🎠✨

They are responsive, accessible carousels and use only CSS. 🤯

🎯 Why CSS-only?
⋅ Simpler to maintain
⋅ Better performance
⋅ No external dependencies
⋅ Works out of the box

Learn more 👇
developer.mozilla.org/en-US/docs/...
Creating CSS carousels - CSS | MDN
The CSS overflow module defines features enabling the creation of flexible and accessible pure-CSS carousels with browser-generated and developer-styled scroll buttons and scroll markers. This guide explains how to create a carousel using these features.
developer.mozilla.org
December 23, 2025 at 9:00 PM
developer.mozilla.org
This is the web you know and build on. 🛠️

A great visual by HeyNina101 from SketechWorld, covering HTML & CSS to TCP & TLS - the core layers that keep everything running.
December 23, 2025 at 4:00 PM
developer.mozilla.org
Let's learn about CSP (Content Security Policy) 🛡️

CSP, when set properly,
✅ Blocks malicious scripts from running on your site.
✅ Prevents data injection attacks.
✅ Reduces the risk of clickjacking and other web security threats.

Learn more 👇
developer.mozilla.org/en-US/docs/...
Content Security Policy (CSP) - HTTP | MDN
Content Security Policy (CSP) is a feature that helps to prevent or minimize the risk of certain types of security threats. It consists of a series of instructions from a website to a browser, which instruct the browser to place restrictions on the things that the code comprising the site is allowed to do.
developer.mozilla.org
December 22, 2025 at 9:00 PM
developer.mozilla.org
Don’t fear the terminal, embrace it! 🫂

Get comfortable with the command line and learn,
✅ How to open your terminal
✅ Common commands like cd, ls, and mkdir
✅ How to create, move, and delete files and folders

Get the cheat sheet! 👇
developer.mozilla.org/en-US/docs/...
Command line crash course - Learn web development | MDN
In your development process, you'll undoubtedly be required to run some commands in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.
developer.mozilla.org
December 22, 2025 at 11:00 AM
developer.mozilla.org
You’ve learned how to write a function… now let’s make sure it works. 🫧

Practice real coding challenges with JavaScript functions – right in your browser, with interactive scrims from Scrimba.

🧠 Write, run, and debug your way to mastery
developer.mozilla.org/en-US/docs/...
Test your skills: Functions - Learn web development | MDN
The aim of this skill test is to help you assess whether you've understood our Functions — reusable blocks of code, Build your own function, and Function return values articles.
developer.mozilla.org
December 19, 2025 at 4:00 PM
developer.mozilla.org
Tired of long-running scripts blocking the UI?

The Web Workers API lets you run JS in the background, keeping your app responsive and smooth.
✅ Offload heavy tasks
✅ Keep the main thread free
✅ Great for data crunching, parsing, and more

Read how 👇
developer.mozilla.org/en-US/docs/...
Using Web Workers - Web APIs | MDN
Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can make network requests using the fetch() or XMLHttpRequest APIs. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa).
developer.mozilla.org
December 19, 2025 at 4:00 AM
developer.mozilla.org
🦊 Firefox 146 is out! What's new:

• Inspector: auto-hides unused CSS custom properties
• contrast-color() + text-decoration-inset support
• scope enabled by default
• WeakMap/WeakSet now accept Symbol keys
• WebDriver BiDi upgrades

Release notes 👇
developer.mozilla.org/en-US/docs/...
Firefox 146 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 146 that affect developers. Firefox 146 was released on December 9, 2025.
developer.mozilla.org
December 18, 2025 at 12:00 PM
developer.mozilla.org
🆕 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/...
December 18, 2025 at 5:00 AM
developer.mozilla.org
- It’s not just about font size! 🔠

It is meant to represent side comments, legal disclaimers, fine print, or less prominent text, not just make things smaller visually.

📜 Used for:
Legal disclaimers
Copyright notes
A11y hints, etc

Read more 👇
developer.mozilla.org/en-US/docs/...
<small>: The Side Comment element - HTML | MDN
The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.
developer.mozilla.org
December 17, 2025 at 1:00 PM
developer.mozilla.org
Newly Available: CustomStateSet ✅

What is it? 🤔
It’s a new API that lets developers define and manage custom states on HTML elements, enabling fine-grained styling and behavior control using the :state() CSS pseudo-class.

Start experimenting now 👇
developer.mozilla.org/en-US/docs/...
CustomStateSet - Web APIs | MDN
The CustomStateSet interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.
developer.mozilla.org
December 17, 2025 at 7:00 AM
developer.mozilla.org
Firefox 146 brings WebDriver BiDi updates! 🤖

• setExtraHeaders for auto request header injection
• Node context locating for iframes
• Locale + timezone override improvements
• Better network data collection
• Reliable request IDs

Release notes 👇
developer.mozilla.org/en-US/docs/...
Firefox 146 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 146 that affect developers. Firefox 146 was released on December 9, 2025.
developer.mozilla.org
December 15, 2025 at 9:00 PM
developer.mozilla.org
✨ Meet Shrinivass, a Sr Full Stack Engineer from USA, contributing for over a year—improving docs like :has() and DOMContentLoaded.

He says, “I contribute because it’s mentorship at scale. Each improvement helps thousands of devs.”

Huge thanks! 🙌
developer.mozilla.org/en-US/commu...
Shrinivass Arunachalam Balasubramanian - Contributor Spotlight | MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
December 15, 2025 at 11:00 AM
developer.mozilla.org
Mastering layout = Mastering Flexbox

Test your understanding with MDN’s hands-on Flexbox exercises. No setup needed, just code and see what happens, with interactive scrims ✨

💡 Learn by solving
developer.mozilla.org/en-US/docs/...
Test your skills: Flexbox - Learn web development | MDN
The aim of this skill test is to help you assess whether you understand how flexbox and flex items behave. Below are four sets of design problems you can solve using flexbox. Your task is to fix the problems.
developer.mozilla.org
December 12, 2025 at 4:00 PM
developer.mozilla.org
Firefox 146 ships improvements for CSS devs 🎨

• contrast-color() for WCAG-friendly contrast
• display-p3-linear color space
• text-decoration-inset
• scope at-rule now on by default
• -webkit-fill-available for better compat

Release notes 👇
developer.mozilla.org/en-US/docs/...
Firefox 146 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 146 that affect developers. Firefox 146 was released on December 9, 2025.
developer.mozilla.org
December 12, 2025 at 4:00 AM
developer.mozilla.org
Fine-tune multilingual typography with text-autospace ✨

It lets you control spacing between CJK and Latin characters.
> text-autospace: ideograph-alpha ideograph-numeric punctuation;

Now available on Baseline 2025. 🎉

Learn more 👇
developer.mozilla.org/en-US/docs/...
December 11, 2025 at 12:00 PM
developer.mozilla.org
👩‍💻 Not a designer? No problem.
If you're a developer who wants to build better-looking interfaces, this guide is made for you. It covers:

✅ Visual design principles
✅ Color, contrast, and typography
✅ Layout
✅ Visual hierarchy and balance

Read now 👇
developer.mozilla.org/en-US/docs/...
Design for developers - Learn web development | MDN
The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better.
developer.mozilla.org
December 11, 2025 at 5:00 AM
developer.mozilla.org
🦊 Firefox 146 is out! What's new:

• Inspector: auto-hides unused CSS custom properties
• contrast-color() + text-decoration-inset support
• scope enabled by default
• WeakMap/WeakSet now accept Symbol keys
• WebDriver BiDi upgrades

Release notes 👇
developer.mozilla.org/en-US/docs/...
Firefox 146 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 146 that affect developers. Firefox 146 was released on December 9, 2025.
developer.mozilla.org
December 10, 2025 at 1:19 PM
developer.mozilla.org
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.
December 9, 2025 at 9:00 PM
developer.mozilla.org
Did you know about Strict Mode? 🤔

✨ "use strict"; ✨

Strict Mode catches silent errors, making your code more predictable and easier to debug. It also improves performance and helps you write more secure JavaScript code.

See how 👇
developer.mozilla.org/en-US/docs/...
Strict mode - JavaScript | MDN
JavaScript's strict mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode isn't just a subset: it intentionally has different semantics from normal code. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally.
developer.mozilla.org
December 9, 2025 at 4:00 PM
developer.mozilla.org
📷 Ever wonder what’s really happening behind your web images?

From pixels to formats to compression, you should use:
- JPEG for details
- PNG for transparency
- WebP & AVIF for web-performance
- SVG for resolution-independent graphics

Read more 👇
developer.mozilla.org/en-US/blog/...
Pixel data from encoders to decoders | MDN Blog
From individual pixels to fully decoded images on your screen, raw pixel data gets transformed, compressed, and efficiently delivered. Learn about the techniques and optimizations that shrink image information without any perceivable loss in quality.
developer.mozilla.org
December 8, 2025 at 9:00 PM