CSS Paint Worklet: Level Up Your Background Images

2025-05-26

This example demonstrates creating dynamic background images using CSS Paint Worklet. By defining custom properties `--boxColor` and `--widthSubtractor`, and using the CSS `nth-of-type` selector, we generate background images with varying colors and widths for list items. The JavaScript registers an external paint worklet script, `boxbg.js`, which contains the logic for drawing the background. The final result is customizable; tweak the custom property values in DevTools to alter the colors and widths.

(developer.mozilla.org)

Development Custom Background

HTML's Implicit Heading Levels Removed

2025-04-11

The HTML specification previously defined an outline algorithm that implicitly determined the semantic heading level of

elements based on nesting within sectioning elements (, , , ). Browsers rendered section > h1 with the same font-size and margins as

, section > section > h1 as

, and so on. This default rendering was in browser UA stylesheets, but not the accessibility tree (used by screen readers). Websites using sectioning elements unexpectedly saw these auto-generated heading levels. This caused confusion over

usage, inconsistent tool handling, and the algorithm was deemed problematic. The algorithm was removed in 2022, but UA stylesheet rules remained. Now, browser vendors are removing those default styles.

(developer.mozilla.org)

Development

Global Privacy Control (GPC): A User-Powered Solution to Web Tracking?

2025-03-16

Unlike its predecessor, Do Not Track (DNT), the Global Privacy Control (GPC) signal has backing from the California Attorney General and aims for alignment with the EU's GDPR, empowering users like never before. DNT's ineffectiveness stemmed from its lack of legal enforcement, but GPC changes that. It transmits users' "Do Not Sell" requests to websites, compelling compliance. With support from browsers like Mozilla Firefox, Brave, and DuckDuckGo's Privacy Browser, GPC signals a potential turning point in the fight against web tracking.

(developer.mozilla.org)

Tech web tracking

Temporal API: Revolutionizing Date and Time Handling in JavaScript

2025-01-30

The Temporal API simplifies date and time manipulation in JavaScript. It supports various calendar systems (like the Chinese Lunar calendar), handles time zone conversions seamlessly, and offers intuitive comparison methods. For example, it can calculate the next Chinese New Year or determine the duration until a future Unix timestamp. While `toLocaleString` behavior varies slightly across browser implementations, the Temporal API offers robust date and time operations, making it a boon for developers.

(developer.mozilla.org)

Development Date Time

MDN Learning Resources Get a Major Overhaul: New Learning Experience Launched

2024-12-25

In December 2024, MDN launched a major update to its "Learn Web Development" section, merging the MDN Curriculum with existing learning content to create a more streamlined learning path. This upgrade addresses previous issues like bloated content and unclear learning pathways, providing a clearer and more accessible experience for beginners. The new site uses a modular structure with "Getting Started," "Core," and "Extensions" sections, incorporating clear learning objectives and interactive content. MDN will continue to improve content and design, aiming to deliver even better learning resources in the future.

(developer.mozilla.org)

Development Web Development Learning Learning Resource Upgrade