MDN Web Docs
LightNews LightNews
banner
developer.mozilla.org
MDN Web Docs
@developer.mozilla.org
1.9K followers 11 following 340 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
No more padding hacks 🖼️

The aspect-ratio property lets you define a fixed width-to-height ratio for any element, making responsive design easier than ever.

🎥 Great for responsive media
🎴 Cleaner layouts w/o JS
📦 Works with grid, flexbox

Read more ↓
developer.mozilla.org/en-US/docs/...
aspect-ratio - CSS | MDN
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.
developer.mozilla.org
January 16, 2026 at 4:00 PM
Reposted by MDN Web Docs
httparchive.org
The 2025 Web Almanac by HTTP Archive has been officially released! 🚀

We would like to thank all of our contributors from around the globe who made this extensive report possible!

Check out the full report here: almanac.httparchive.org
January 16, 2026 at 3:00 AM
developer.mozilla.org
sign() is Newly Available on Baseline ➖➕

Unlike abs(), which returns a magnitude, sign() returns the direction of a value: -1, 1, 0, or -0.
Useful when layout logic depends on whether a value is positive or negative.

Learn more here 👇
developer.mozilla.org/en-US/docs/...
Dark code snippet card showing CSS example: "div { top: calc(100px * sign(var(--offset))); }" with title "sign() - MDN" on a blue gradient background.
January 16, 2026 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/...
Rounded dark terminal window showing a CSS code snippet for text-autospace with ideograph-alpha, ideograph-numeric and punctuation settings.
January 15, 2026 at 12:00 PM
developer.mozilla.org
Have you met ? 🎨
The CSS data type behind color angles.

Used by hsl(), hwb(), lch(), and oklch(), represents a color’s position on the color wheel and automatically wraps around.

Learn how it works 👇
developer.mozilla.org/en-US/docs/...
<hue> - CSS | MDN
The <hue> CSS data type represents the hue angle of a color. It is used in the color functions that accept hue expressed as a single value, specifically hsl(), hwb(), lch(), and oklch() functional notations.
developer.mozilla.org
January 15, 2026 at 5:00 AM
developer.mozilla.org
Need cross-thread synchronization without freezing the main thread? 🥶

Atomics.waitAsync() returns immediately and resolves when another thread calls Atomics.notify().

Perfect for coordinating workers with SharedArrayBuffer.

Learn more 👇
developer.mozilla.org/en-US/docs/...
Dark themed code snippet showing JavaScript creating a SharedArrayBuffer and an Int32Array, titled "Atomics.waitAsync - MDN".
January 14, 2026 at 1:00 PM
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
January 14, 2026 at 7:00 AM
developer.mozilla.org
➕ Meet abs() in CSS

The abs() function returns the absolute value of a calculation, keeping numbers, lengths, or percentages always positive. Useful for safer layouts and predictable visuals.

Learn more here ↓
developer.mozilla.org/en-US/docs/...
Stylized dark code window showing a CSS rule using abs(var(--font-size)) to set h1 font-size, on a blue gradient background.
January 13, 2026 at 9:00 PM
developer.mozilla.org
Need to convert a color between CSS formats? 🎨

The Color format converter lets you pick a color and instantly copy it as rgb(), hsl(), hex, and more - anywhere the type is supported in CSS.

Try it here 👇
developer.mozilla.org/en-US/docs/...
Color format converter - CSS | MDN
This tool lets you enter or pick a color and copy its corresponding value in any CSS color format. You can use the generated color value anywhere the <color> data type is supported in CSS. This tool can also help you understand the syntax of the different color notations.
developer.mozilla.org
January 13, 2026 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
January 9, 2026 at 4:00 PM
developer.mozilla.org
MDN is built by Mozilla and a global community of contributors — writers, translators, engineers, educators. 🌍

Together we maintain 45K+ pages helping developers build the open web.

Discover our mission & how to get involved 👇
developer.mozilla.org/en-US/about
About 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
January 8, 2026 at 6:22 PM
developer.mozilla.org
Need cross-thread synchronization without freezing the main thread? 🥶

Atomics.waitAsync() returns immediately and resolves when another thread calls Atomics.notify().

Perfect for coordinating workers with SharedArrayBuffer.

Learn more 👇
developer.mozilla.org/en-US/docs/...
Dark themed code snippet showing JavaScript creating a SharedArrayBuffer and an Int32Array, titled "Atomics.waitAsync - MDN".
January 5, 2026 at 5:23 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
January 2, 2026 at 9:58 PM
developer.mozilla.org
Happy New Year to the MDN community! 💟

Thank you for building the web with us. Writing docs, fixing bugs, reviewing PRs, and helping developers learn every day.

Here’s to better standards, better tooling, and better documentation in the year ahead. 🥂
Dark terminal window showing large ASCII art reading "Happy 2024!" with a "Happy new year from MDN!" header and blue gradient background.
January 1, 2026 at 12:00 PM
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 31, 2025 at 1:00 PM
developer.mozilla.org
TIL: Compression Dictionary Transport 💡

A new HTTP feature that can dramatically shrink the size of your responses, especially when serving content that changes often but includes a lot of repeated structure (think: JSON, JS, CSS).

Learn more 👇
developer.mozilla.org/en-US/docs/...
Compression Dictionary Transport - HTTP | MDN
Compression Dictionary Transport is a way of using a shared compression dictionary to dramatically reduce the transport size of HTTP responses.
developer.mozilla.org
December 30, 2025 at 4:00 PM
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 29, 2025 at 4:35 PM
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