Nostr notes by Bramus

Over the past years, I’ve written a bunch of posts and done ...

2026-04-02T16:10:23Z

Over the past years, I’ve written a bunch of posts and done quite a few experiments with View Transitions, such as optimizing the keyframes (so that they animate on the compositor) or driving a VT by scroll.

I noticed I repeated a lot of code while creating all those … so I bundled that all up in a package for you to use as well.

Optimizing the keyframes or a VT for example now is just a one-liner: optimize(transition);

👉 https://chrome.dev/view-transitions-toolkit/

CSS `light-dark()` is about to support images! ...

2026-03-19T12:14:31Z

CSS `light-dark()` is about to support images!

https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/

Shipping in Firefox 150. Starting tomorrow, available behind a flag in Chromium 148.

I was under the assumption that ...

2026-03-09T12:34:43Z

In reply to nevent1q…q977
_________________________

I was under the assumption that https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/scope does the job. Does it not?

Also, Thomas Steiner :chrome: (npub1ctt…3egd) is my goto fixer for all my PWA needs, so perhaps he knows the magic line of code you need here.

On my way back home from #SotB2026 I hacked my way into animating ...

2026-03-02T22:30:01Z

On my way back home from #SotB2026 I hacked my way into animating between `position-area` values with View Transitions. The VT automatically gets started by a StyleObserver.

Demo + details can be found on my blog: https://brm.us/animate-position-area

It’s not 100% perfect though, as Firefox doesn’t do anything and Chrome has a 1-frame glitch.

New in Chrome DevTools in Chrome 144: we now show the Adopted ...

2025-12-01T14:13:24Z

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 ...

2025-11-22T07:59:22Z

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 ...

2025-11-20T10:47:25Z

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

And it’s great for Syntax Highlighting! ...

2025-11-19T22:18:21Z

In reply to nevent1q…j59r
_________________________

And it’s great for Syntax Highlighting!

https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

(And most of the issues I cover in my post have been fixed by now)

At #Fronteers #DarkMode, @npub16zz…2ugy proposed the ...

2025-10-03T16:34:39Z

At #Fronteers #DarkMode, Brecht (npub16zz…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: https://open-ui.org/components/enhanced-range-input.explainer/
- Demos: https://brechtdr.github.io/enhanced-range-slider-poc/
- Feedback Form: https://docs.google.com/forms/d/e/1FAIpQLSdKgYidAF097VQQ1OCr3TqHOV-reS4mRDgCNFUgB_nKZt0o1Q/viewform?pli=1

New blog post: A custom `--light-dark()` function in CSS that ...

2025-09-30T20:08:39Z

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!

https://brm.us/--light-dark()

CSS Excitement! > RESOLVED: Add `color-scheme()` test to both ...

2025-09-24T16:25:01Z

CSS Excitement!

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

https://github.com/w3c/csswg-drafts/issues/10577#issuecomment-3329616811

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 ...

2025-09-23T13:57:19Z

🎂 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)

Don’t worry about filing a bug and it turning out to be a ...

2025-09-08T07:18:33Z

In reply to nevent1q…r53j
_________________________

Don’t worry about filing a bug and it turning out to be a duplicate.

Duplicates are actually a good thing, because they act as an upvote, signaling that several sites are affected by it.

👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing ...

2025-05-29T13:33:07Z

👀 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.

After ignoring the first email they send, I do reply to the ...

2025-04-07T15:15:10Z

In reply to nevent1q…q8fv
_________________________

After ignoring the first email they send, I do reply to the follow-up one saying that it’s going to cost them $50,000 and then I don’t hear back from them. Works like a charm :)

Nostr event nevent1qqs96jcmhm9ms6lh2hv9grej0k0qmg3sy9npydu3kdn4eukve6jy8uczyzskv00vu8ysgcjltk2ykueyv07x53jyf96egesc30nkrwu50wmj6460zkt

2025-03-28T09:25:09Z

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

🗣️ PSA: Chrome on Android is getting an upgrade and will ...

2025-03-03T21:24:53Z

🗣️ PSA: Chrome on Android is getting an upgrade and will support edge-to-edge from Chrome 135.

Here’s all you need to know to migrate your website to support edge-to-edge: https://developer.chrome.com/docs/css-ui/edge-to-edge

(Be sure to check this guide if you have `position: fixed` content at `bottom: 0`. If you don’t have such content, you’re fine.)

CSS Custom Functions are coming … and they are going to be a ...

2025-02-09T01:21:49Z

CSS Custom Functions are coming … and they are going to be a game changer!

👉 https://brm.us/css-custom-functions

Here’s a blog post with more words on this. ...

2025-01-16T11:39:45Z

In reply to nevent1q…eq79
_________________________

Here’s a blog post with more words on this.

https://brm.us/movebefore

New in Chrome 133 – which goes stable on Feb 4 – is a new ...

2025-01-16T09:57:05Z

New in Chrome 133 – which goes stable on Feb 4 – is a new method to move an element around the DOM.

Unlike the classic way of removing+reinserting a node, this moveBefore method preserves the element’s state!

Iframes remain loaded, animations don’t restart, …

DEMO: https://codepen.io/bramus/full/xbKzPJB

(Add View Transitions for an even smoother move!)

Wait? What? – I don’t … HUH?! 😵‍💫 ...

2024-12-28T22:11:16Z

Wait? What? – I don’t … HUH?! 😵‍💫
https://front-end.social/@JaneOri/113731551202700401

Spot Non-Composited Animations in Chrome DevTools > The ...

2024-12-10T12:34:12Z

Spot Non-Composited Animations in Chrome DevTools

> The animations track of a performance trace can now tell you if and why an animation was not composited.

https://www.bram.us/2024/12/10/spot-non-composited-animations-in-chrome-devtools/

CSS Wrapped 2024 is here! Just like last year, we – the Chrome ...

2024-12-06T00:28:00Z

CSS Wrapped 2024 is here!

Just like last year, we – the Chrome DevRel team – have published CSS Wrapped, our end of year overview covering many of the new #CSS and Web UI features that landed in Chrome and The Web Platform in 2024.

👉 https://chrome.dev/css-wrapped-2024/ is the place to be!

🤩 Web Animations Excitement! 🎉 🎉 ...

2024-11-28T14:26:11Z

🤩 Web Animations Excitement!

🎉 🎉 `Animation.overallProgress` is coming! 🎉 🎉

With it, you can easily and consistently get an animation’s progress, regardless of the timeline being used.

Here’s a demo that syncs a Scroll-Driven Animation’s progress to a 3D model’s rotation:

https://codepen.io/bramus/full/xbKxRzy

(Needs a browser with Scroll-Driven Animations support. Uses `Animation.progress` when available or falls back to some extra code to get the progress)

As of Chrome 131 you have more options to style `<details>` ...

2024-11-20T16:39:41Z

As of Chrome 131 you have more options to style `<details>` and `<summary>`.

You can now use the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.

https://developer.chrome.com/blog/styling-details

A while ago [@paul_irish](https://toot.cafe/@paul_irish ) and I ...

2024-11-19T11:04:33Z

A while ago [@paul_irish](https://toot.cafe/@paul_irish ) and I tweaked the Chrome DevTools Performance Timeline to make it more easy for you to spot + debug non-composited animations.

- Non-composited animations are marked with red triangles
- Upon selecting, you now see the reason + relevant properties for why compositing failed

 Chicago Kare by Duane King A Faithful Reproduction of the ...

2024-11-18T13:29:19Z

 Chicago Kare by Duane King

A Faithful Reproduction of the Bitmap Version of the Chicago Typeface Created by Susan Kare for Apple Computer in 1984.

https://chicagokare.xyz/

I published a new version of my experimental Chrome Dark Mode ...

2024-10-29T10:30:05Z

I published a new version of my experimental Chrome Dark Mode Toggle extension.

On top of per-origin override, you can now set a Chrome-wide preference to have your OS in Dark Mode but all sites in Light Mode (or vice versa).

Sites can also request an override, thanks to the Web Preferences API.

See https://brm.us/chrome-dark-mode-toggle for more details.

ouch! Take care!

2024-10-10T21:14:19Z

In reply to nevent1q…kn78
_________________________

ouch! Take care!

Wow, look at this AMAZING Scroll-Driven Animations demo by Paul ...

2024-10-08T08:18:42Z

Wow, look at this AMAZING Scroll-Driven Animations demo by Paul Noble!

https://codepen.io/paulnoble/pen/gOVPedz

Go check it out (and hit the ❤️ icon).

Maybe needs a few more iterations … 270deg rotation? No ...

2024-10-03T15:19:20Z

In reply to nevent1q…wkvx
_________________________

Maybe needs a few more iterations … 270deg rotation? No rotation but simply smaller (on top of the rightmost digit)? Something else?

(Just spitballing ideas here. I'm no designer)

Thought: what if the numbered versions had only the number on the ...

2024-10-02T21:09:53Z

In reply to nevent1q…jgfr
_________________________

Thought: what if the numbered versions had only the number on the place where CSS is?

Or maybe scale down and rotate CSS by 90deg and prepend it to the number, all positioned at the bottom right in the box?

📝 Solved by CSS Scroll-Driven Animations: hide a header when ...

2024-09-29T12:39:59Z

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again only when scrolling up again.

By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value.

🔗 https://brm.us/scroll-driven-header

Demo by Fabrizio Calderan (npub1xg9…uter).

Feature detecting Scroll-Driven Animations with `@supports`: you ...

2024-09-24T20:49:18Z

Feature detecting Scroll-Driven Animations with `@supports`: you want to check for `animation-range` too.

The problem is that a check for simply `animation-timeline: scroll()` does not exclude Firefox Nightly, which only has a partial SDA implementation.

Details: https://www.bram.us/2024/09/24/feature-detecting-scroll-driven-animations-you-want-to-check-for-animation-range-too/

Something to add to your CSS reset from now on: ``` :root { ...

2024-09-24T13:38:13Z

Something to add to your CSS reset from now on:

```
:root {
interpolate-size: allow-keywords;
}
```

It enables things like transitions from `height: 0` to `height: auto`.

https://developer.chrome.com/docs/css-ui/animate-to-height-auto/

A often-heard complaint about View Transitions is how it handles ...

2024-09-23T12:52:20Z

A often-heard complaint about View Transitions is how it handles clip-path, border-radius, opacity, …

The snapshots fade, while you’d want the clip-path to actually animate. Also, nested elements bleed out their container because the snapshots are a flat list instead of a nested tree.

Exciting release, as Safari now joins Chrome in supporting ...

2024-09-17T21:24:26Z

Exciting release, as Safari now joins Chrome in supporting (Same-Document) View Transitions and Style Queries! 🎉

🔗 View Transitions: https://developer.chrome.com/docs/web-platform/view-transitions

🔗 Style Queries: https://developer.chrome.com/docs/css-ui/style-queries
https://front-end.social/@jensimmons/113153876581472336

“Shake mouse pointer to locate” is such a good #macOS ...

2024-08-30T08:30:34Z

“Shake mouse pointer to locate” is such a good #macOS feature. I use it almost daily.

“Where is that damn mouse again?!–Oh, it’s right there.”

New in @ChromeDevTools (in Chrome Canary): You can now force more ...

2024-08-20T10:33:18Z

New in @ChromeDevTools (in Chrome Canary): You can now force more states – such as :active, :focus, … – onto elements.

For example, when inspecting an <input> element you can now also force states such as :enabled, :valid, etc.

Today I saw this React hook (see photo) get shared on birdsite. ...

2024-08-19T18:30:58Z

Today I saw this React hook (see photo) get shared on birdsite. It enables one to “automatically scroll down when new messages arrive in a chat”.

While it might work, you could — and should — use this little bit of CSS instead:

```
.log {
scroll-snap-type: y proximity;
align-content: end;
}
.log::after {
display: block;
content: "";
scroll-snap-align: end;
}
```

“… remains snapped to the bottom …unless the user has scrolled away from that edge” — https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f

👀 Apple/WebKit about to express support for cross-document ...

2024-08-15T09:38:47Z

👀 Apple/WebKit about to express support for cross-document View Transitions (and related features such pageswap, pagereveal, render blocking) + also View Transition Types.

https://github.com/WebKit/standards-positions/issues/193#issuecomment-2290888602

Get the rundown of these features here: https://developer.chrome.com/blog/view-transitions-update-io24 (video included)

Oh nice, @npub1j49…m4j6 now has support for the ...

2024-08-14T16:48:29Z

Oh nice, Firefox Nightly has moved (npub1j49…m4j6) now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard.

There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content.

You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard.

See https://developer.chrome.com/blog/viewport-resize-behavior#opting_in_to_a_different_behavior for all details.

Supported in Chrome from Chrome 108. No word from Safari on this.

It’s official now: Intent to Prototype got sent out :) ...

2024-08-14T10:01:31Z

In reply to nevent1q…x47j
_________________________

It’s official now: Intent to Prototype got sent out :)

https://botsin.space/@intenttoship/112955584866106108

If you haven't been following along: (if all goes well) that ...

2024-07-21T16:19:49Z

In reply to nevent1q…7292
_________________________

If you haven't been following along: (if all goes well) that means we'll have cross-browser support for Same-Document View Transitions by the end of the year! 😎

Best to go to https://crbug.com/new and follow the form flow. Did ...

2024-05-07T07:42:31Z

In reply to nevent1q…c9d4
_________________________

Best to go to https://crbug.com/new and follow the form flow.

Did a quick check and I found https://issues.chromium.org/issues/40935612 for this.

Best to leave a comment with your findings on the issue to blew some new life into it.