Profile

New in Chrome DevTools in Chrome 144: we now show the Adopted Style Sheets in the Elements tree.

JPEG XL in Chromium update: “[...] we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium. In order to enable it by default in Chromium we would need a commitment to long-term maintenance.” http://groups.google.com/a/chromium.org/group/blink-dev/msg/482c0bcb26336

Good feedback. I’ve heard requests for all of these before, so you’re on to something :)

At #Fronteers #DarkMode, @npub16zza...2ugy proposed the <rangegroup> HTML Element which he has been working on at Open UI. It unlocks the multi-handle range slider, a pattern you might have already used when picking a price-range on a travel website. - Explainer:

Enhanced Range Input (Explainer) | Open UI

- Demos:

Advanced Range Input Component

- Feedback Form:

Google Docs

Community Feedback: The Proposed <rangegroup> HTML Element

This form is for gathering feedback on the <rangegroup> proposal, which aims to create a new, native HTML element for building multi-handle sliders...

New blog post: A custom `--light-dark()` function in CSS that works with any type of value _(not just colors!)_ in just 3 LOC > CSS Custom Functions (`@function`) + CSS `if()` + CSS `color-scheme()` = one sweet combo!

Bram.us

A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC

CSS Custom Functions (@function) + CSS if() + CSS color-scheme() = one sweet combo!

CSS Excitement! > RESOLVED: Add `color-scheme()` test to both `@container` queries and `if()`.

GitHub

[css-values-5] Using `if()` to do dark/light switching of image urls. · Issue #10577 · w3c/csswg-drafts

Please forgive me if this one's a bit vague as I'm adding an issue here at Chris Lilley's request, and I'm not familiar with the process too much. ...

This means you can do a light-dark() that works with any type of value 🤩🤩 ``` background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg)); ```

🎂 Happy 23rd birthday, Firefox (Firefox 1.0 was released on November 9, 2004 but the first version of the thing that lead up to it – Phoenix 0.1 – was released on September 23, 2002)

👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.

On my way to London for #SotB2025. See you there?